【微信小程序】哔哩哔哩首页导航条--（能滑动，且被点击的下边框会显示）

效果

代码

index.wxml

 <!-- 自己滚动区域的组件 -->
    <scroll-view class="nav" scroll-x>
      <view bindtap="activeNav" data-index="index" class = "nav_item {{index===currentIndexNav?active:''}}" wx:for="{{navList}}" >
        {{item.text}}
      </view>
    </scroll-view>

index.js

在这里插入代码片/**
   * 页面的初始数据
   */
  data: {
    //被点击首页导航菜单索引
    currentIndexNav:0,
     navList:[],
  },

/**
 * 点击首页导航按钮
 */
//e是一个事件源,得到目前对象的索引。
  activeNav(e){
    this.setData({
      currentIndexNav:e.target.dataset.index,
    })
  },


  /**
   * 获取首页导航数据
   */
  getNavList(){
    let that = this;
    wx.request({
      url: 'http://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
      success(res){
       // console.log(res);
      //  三个等于号：是数值、类型都一样。   ===0 说明执行成功
       if(res.data.code === 0){
        that.setData({
          navList : res.data.data.navList,
        })
       }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getNavList();
  },