可滚动菜单栏
-
效果（红色框中内容）：
-
概述
在日常应用中，菜单栏的内容很多的时候就可以使用滚动菜单栏，上图滚动菜单栏是动态生成。此菜单栏可以实现自由滑动的效果，并且通过绑定事件还可以实现选中效果。
-
实现
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); 在控制台输出结果进行查看
可以发现微信小程序开发，有着明确的思路，每个文件各司其职来实现需求，根据以上思路可以实现其他的类似结果。