可滚动菜单栏
-
效果(红色框中内容):
-
概述
在日常应用中,菜单栏的内容很多的时候就可以使用滚动菜单栏,上图滚动菜单栏是动态生成。此菜单栏可以实现自由滑动的效果,并且通过绑定事件还可以实现选中效果。
-
实现
JScript文件
1)加载菜单内容
a.通过发送request的GET请求从后台API获取菜单数据
b.在页面生命周期函数 onLoad 中注册获取菜单内容的函数,让页面在每次被加载的时候发送请求
getNavList: function(){
let that = this; // 暂存当前向程序对象
// 利用小程序内置发送请求的方法
wx.request({
// 真实测试接口可直接访问
url: "https://www.fastmock.site/mock/c8b94bc7b5f6687ccfe99d2c4132803f/bi/navList",
success(res){
//console.log(res);
//请求成功便绑定数据(测试数据Jason格式可在postman中观察)
if(res.data.code===0){
// 又是一层嵌套,所以this已经不是代表原本的微信小程序对象,这里就要使用之前预存的that
that.setData({
navList:res.data.data.navList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//1 获取首页导航数据
this.getNavList();
},
2)绑定点击事件(看完了wxml讲解后再看)
/**
* 当前激活的导航栏选项
*/
activeNav: function(e){
//console.log(e);
// 绑定当前选中的菜单项索引号
this.setData({
currentIndexNav: e.currentTarget.dataset.index
})
},
wxml文件
1)选择使用的组件:scroll-view、view
2)view 标签中,使用 wx:for 属性来动态加载菜单列表,注意还要加上 wx:key 来优化性能
3)view标签中,绑定点击事件 bindtap,并且传递自定义数据 data-index
4)view标签中,动态加载选中激活项的样式
如果这里进行动态加载,直接"nav_item active"会出现全部菜单组件都被选中激活的情况
5)scroll-view标签中,设置属性 scroll-x 表示横向滑动
如果不设置这个属性,菜单栏不能被滑动
<!--首页导航-->
<view class="nav_wrap">
<!--自己滚动区域的组件-->
<scroll-view class="nav" scroll-x >
<view bindtap="activeNav" data-index="{{index}}"
class="nav_item {{index===currentIndexNav?'active':''}}"
wx:for="{{navList}}" wx:key="index" >{{item.text}}</view>
</scroll-view>
</view>
wxss文件
根据需求编写样式
1)编写滚动菜单栏的样式 .nav{}
2)编写菜单排列的样式 .nav_item{}
3)编写菜单项被激活的样式 .nav_item.active{},设置底部边框,粗度为5rpx、实线(soild)、颜色(十六进制、rgb 或 颜色英文)
.nav{
white-space: nowrap;
padding: 5rpx;
}
.nav_item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
}
/*粗度5rpx 实线 粉色*/
.nav_item.active{
border-bottom: 5rpx solid #de688d;
}
-
总结
- 技巧:在编写JScript的代码时要经常使用 console.log(res); 在控制台输出结果进行查看
可以发现微信小程序开发,有着明确的思路,每个文件各司其职来实现需求,根据以上思路可以实现其他的类似结果。