微信小程序实现横向滚动条功能

在微信小程序中实现用户可滑动的横向滚动导航栏效果

效果图

导航栏的文本用户是可以滑动的

实现方法

1. 在当前页面的js文件中的data块儿定义一个导航栏的文本数据集

   // 导航栏文本
   nvalist:[
     { text: '首页' },
     { text: '动画' },
     { text: '番剧' },
     { text: '动画' },
     { text: '国创' },
     { text: '音乐' },
     { text: '舞蹈' },
     { text: '科技' },
     { text: '游戏' },
     { text: '娱乐' },
     { text: '鬼畜' },
     { text: '电影' },
     { text: '电视剧' },
     { text: '纪录片' },
     { text: '影视' },
     { text: '时尚' },
     { text: '生活' },
     { text: '广告' },
     { text: '直播' },
     { text: '相簿' },
   ]

2. 在wxml文件中书写如下标签,用来循环遍历在js中的导航栏文本

   <scroll-view class="nav" scroll-x>
   <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index==currenentIndexNav?'active':''}}" wx:for="{{nvalist}}" wx:key="{{index}}">
   {{item.text}}
   </view>
   </scroll-view>

3. 在js中判断用户点击文本的索引值

   //定义被点击菜单的索引值
     currenentIndexNav: 0,
     // 当用户点击文本后，显示相应的导航栏文本模块
     activeNav(e){
       this.setData({
         currenentIndexNav:e.target.dataset.index
       })
     },

4. wxss样式

   .nav{
     white-space: nowrap;
     padding: 10rpx;
   }
   .nav_item{
     padding: 20rpx 45rpx;
     font-size: 30rpx;
     display: inline-block;
   }
   .nav_item.active{
     border-bottom: 5rpx solid pink;
   }