1500字范文 > ❤ ❤微信小程序：数据库查询实现导航栏切换❤ ❤

❤ ❤微信小程序：数据库查询实现导航栏切换❤ ❤

时间：2022-10-09 03:21:07

实现原理：

一、实现情况

二、实现思路

1.数据库的查询

页面展现的图片以及文字均为从云开发控制台数据库中获取的数据，实现的基础为对数据库的查询，

实现思路：给每一个数据集中的每一个记录添加一个标签，我给标签命名为a,通过标签进行分类，点击到第一个按钮页面出现的数据为“a”:"0"的记录，点击第二个按钮页面出现的数据为“a”:"1"的记录，点击第三个按钮页面出现的数据为“a”:"2"d 记录…,以上，就实现了点击nav导航栏按钮可以切换不同的数据

我设置的标签为a(id为自动生成，src为图片路径，我设置的为其相对路径，title为文字内容)

js代码

// 导航栏数据切换toggle(e){// 点击中，加入类activethis.setData({"active":e.target.dataset.index})var _this=this;// 获取索引值console.log(e.target.dataset.index);db.collection('yc_list').where({a:e.target.dataset.index.toString()}).get({success: function(res) {// res.data 是包含以上定义的两条记录的数组console.log(res.data)_this.setData({"yc_list":res.data})}})},// /**// * 生命周期函数--监听页面加载// */onLoad(){//此处接收传递过来的参数wx.navigateTo跳转时传递的参数var _this=this;db.collection('yc_list').where({a:"0"}).get({success: function(res) {// res.data 是包含以上定义的两条记录的数组console.log(res.data)_this.setData({"yc_list":res.data})}})

更具体的对小程序云存储的数据库的增删查改可以查看微信开放文档

微信开发文档：https://developers./miniprogram/dev/wxcloud/basis/getting-started.html

1.wx:for循环

导航标签写在js中，使用wx:for循环出导航标签，

2.js中设置鼠标点击事件，点击添加类active改变导航标签样式，事件使用bindtap绑定

js代码

// 导航栏数据切换toggle(e){// 点击中，加入类activethis.setData({"active":e.target.dataset.index})

wxml代码

<view wx:for="{{button}}"><text class="{{active==index?'btn':''}} nav_item" bindtap="toggle" data-index="{{index}}">{{item}}</text></view>

js代码

实现结果

js中标签数据增加增加，导航标签相应会动态添加增加

3.自定义属性data-

自定义属性语法以data-开头：我们使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面紧跟自己起的一个变量名，然后后面赋予一个值，这个值就会被存储起来。然后获取数据通过js来实现。

<view wx:for="{{button}}"><text class="{{active==index?'btn':''}} nav_item" bindtap="toggle" data-index="{{index}}">{{item}}</text></view>

以上代码中data-index绑定js中变量index，当导航栏点击中的下标值等于index时，该index就添加类btn

三、全部代码

yuncun.wxml

<image class="slide_btn" bindtap="onChange" src="../../yc_img/yc_gengduo.png"></image><view class="yc_header"><view class="container"><navigator url="/pages/yuncun/yunquan/yunquan" class="navigate1"><view class="header_title1">云圈</view></navigator><navigator url="/pages/yuncun/daren/daren" class="navigator2"><view class="header_title2">达人</view></navigator><image src="../../yc_img/yc_tianjia.png" class="yc_header_r"></image></view></view> <view class="container"><navigator url="/pages/yuncun/yc_search/yc_search"><view class="yc_search"><image src="../../yc_img/yc_sousuo.png"></image><text>哪些歌词长大后才真的看懂？</text></view></navigator></view> <view class="container"><view class="nav"><view wx:for="{{button}}"><text class="{{active==index?'btn':'nav_item'}}" bindtap="toggle" data-index="{{index}}">{{item.text}}</text></view></view></view><view class="main"><view class="container"><view class="list"><view wx:for="{{yc_list}}" wx:key="key" class="list_box"><view class="list_box_top"><navigator url="/pages/yuncun/yuncun_detail/yuncun_detail?src={{item.src}}&title={{item.title}}&title2={{item.title2}}" open-type="navigate" class="detail"><image src="{{item.src}}" class="img" mode="widthFix"></image></navigator></view><text class="box_title1">{{item.title}}</text><text class="box_title2">{{item.title2}}</text></view></view> </view><view class="sidebar {{open?'show':''}}"><view class="container"><view class="slidebar_top"><image src="../../yc_img/yuncun_youxiang.png" alt="" class="yc_touxiang"></image><text>用户12345678 ></text></view><image mode="widthFix" class="slidbar_vip" src="../../yc_img/slidebar_vip.png"></image><view class="wc" wx:for="{{yc_left_item}}" wx:key="key"><image src="{{item.src}}"></image><text>{{item.text}}</text></view></view></view><view class="sidebar-shade" style="display:{{open?'block':''}}" bindtap="onChange"></view></view>

yuncun.js

// 获取应用实例const app=getApp()wx.cloud.init()// 初始化数据库const db=wx.cloud.database()Page({data: {open: false,current:0,newslist:[{text:'999'},{text:'这是分类界面内容'},{text:'这是发现界面内容'},{text:'这是收藏界面内容'},{text:'这是我的界面内容'}],// 侧边yc_left_item:[{src:"../../yc_img/yc_xin.png", text:"我的消息"},{src:"../../yc_img/yc_beik.png",text:"云贝中心"},{src:"../../yc_img/yc_deng.png",text:"创作者中心"},{src:"../../yc_img/yc_piao.png",text:"云村有票"},{src:"../../yc_img/yc_gouwuc.png",text:"商城"},{src:"../../yc_img/yc_youxi.png",text:"游戏专区"},{src:"../../yc_img/yc_cailing.png",text:"口袋铃铛"},{src:"../../yc_img/yc_shezhi.png",text:"设置"},],// 中间视频部分newslist:[// {// detail:[{src:"../img/yc1.jpg",},{src:"../img/yc1.jpg",},{ src:"../img/yc3.png",},{src:"../img/yc4.png"}]// }, {src:"../../yc_img/iu1.png", },{src:"../../yc_img/iu2.png",},],// 确认谁被点中的变量active:0,yc_list:[{src:"../../yc_img/wyb1.png",title:"这是原来数据",price:"$55"},{src:"../../yc_img/wyb2.png",title:"这是原来数据",price:"$99"}],// buttonbutton:[{text:"广场"},{text:"宝藏音乐"},{text:"超燃现场"},{text:"演唱演奏"},{text:"MV"}]},// onClick:function(event){var index = event.currentTarget.dataset.id;this.setData({current:index})},onChange(e) {var that = this;that.setData({open: !that.data.open})},// 导航栏数据切换toggle(e){// 点击中，加入类activethis.setData({"active":e.target.dataset.index})var _this=this;// 获取索引值console.log(e.target.dataset.index);db.collection('yc_list').where({a:e.target.dataset.index.toString()}).get({success: function(res) {// res.data 是包含以上定义的两条记录的数组console.log(res.data)_this.setData({"yc_list":res.data})}})},// /**// * 生命周期函数--监听页面加载// */onLoad(){//此处接收传递过来的参数wx.navigateTo跳转时传递的参数var _this=this;db.collection('yc_list').where({a:"0"}).get({success: function(res) {// res.data 是包含以上定义的两条记录的数组console.log(res.data)_this.setData({"yc_list":res.data})}})//如果要在页面中使用},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

yuncuun.wxss

.btn{font-size: 16px;color: red;padding:3px 11px;border-radius: 20px 15px 15px 15px;line-height: 50rpx;text-align: center;float:left;margin-right:5px;background-color:rgb(252, 216, 222);}.container{margin-left:13px;margin-right: 13px;}/* 侧边栏按钮 */.slide_btn{z-index: 100;position: absolute;top:7px;left:13px;width: 31px;height: 31px;}/*侧边栏*/.sidebar {z-index: 500;background: #f5f5f5;box-shadow: 4rpx 4rpx 12px rgba(0,0,0,.3);display: block;font-size: 16px;font-weight: 400;height: 100%;left: 0;position: fixed;overflow: auto;transform: translate(-600rpx,0);transition: transform .3s;top: 0;width: 600rpx;z-index: 100;}.sidebar.show {transform: translate(0,0);}.sidebar-shade {background: rgba(0,0,0,.3);display: none;height: 100%;position: fixed;left: 0;top: 0;width: 100%;z-index: 99;}/* 每一个侧边item */.wc {position: relative;color:black;padding: 30rpx 0 30rpx 150rpx;border-bottom: 1px solid #eee; margin-left:13px;width: 73%;}.wc>image{position: absolute;top:17px;left:40px;width: 20px;height: 20px;}.wc text:hover{color: red;}/* 头像 */.slidebar_top{position: relative;width: 100%;height: 40px;}.slidebar_top>text{padding-left: 65px;line-height: 40px;text-align: center;}.yc_touxiang{position: absolute;top:2px;left:15px;width: 35px;height: 35px;border-radius: 50%;}.slidbar_vip{width: 73%;margin:15px 13px;}/* 导航栏 */.nav{position: relative;height: 37px;background-color: #fff;margin-top:12px;overflow: hidden;width: 100%;/* background-color: skyblue; */}.nav_item{font-size: 16px;color: #7e7e7e;padding:3px 11px;border-radius: 20px 15px 15px 15px;line-height: 50rpx;text-align: center;float:left;margin-right:5px;background-color:#eeeeee;} /* .nav_item{float: left;} */.active{background-color: #f1eeef;color: #fc3a38;border-radius:15px 15px 15px 15px;}/* -------------main部分开始--------------- */.main{width: 100%;background-color: #d4b2ad;}.list{position: relative;margin-top:10px;width: 100%;height:1000px;}.list_box{margin-top:10px; margin-left:10px;background-color: #fff;border-radius: 10px;width: 46%;height: 23%;float: left;overflow: hidden;}.list_box_top{border-radius: 10px 10px 0 0;width: 100%;height: 77%;overflow: hidden;}.detail>image{width: 100%;}.box_title1{color:#000000;padding:5px 0 0 7px;font-size: 13px;z-index: 500;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.box_title2{padding-left:7px;display: block;font-size: 11px;color:#999999;margin-top:5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.box_title1_icon{margin-left:10px;width: 10px;height: 10px;}/* ---------------导航栏---------------- */.yc_header{position: relative;width: 100%;height: 40px;}.yc_header_l{float: left;width: 30px;height: 30px;}.yc_header .container .yc_header_r{position: absolute;top:5px;right: 13px;width: 30px;height: 30px;}.header_title1{position: absolute;top:0;left:33%;font-size: 18px;line-height: 36px;text-align: center;color:#7d7d7d;font-weight: 700;}.header_title2{position: absolute;top:0;right:34%;font-size: 18px;line-height: 36px;text-align: center;color:#7d7d7d;font-weight: 700;}.header_title2:hover,.header_title1:active{color: #000000;text-decoration:underline;text-decoration-color: #f54843;font-weight: 800;}/* 搜索框 */.yc_search{clear: both;position: relative;width: 100%; height: 36px;background-color: #ededed;border-radius: 15px 15px 15px 15px;}.yc_search image{position: absolute;top:8px;margin-left: 21%;width: 20px;height: 20px;}.yc_search text{line-height: 36px;text-align: center;padding-left:30%;color:#979797;font-size: 14px;}.navigate1,.navigate2{width: 60px;height: 30px;}