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

我很好请走开谢谢

于 2020-03-23 23:12:24 发布

阅读量852

点赞数

CC 4.0 BY-SA版权

分类专栏： # 微信小程序开发

本文链接：https://blog.csdn.net/alovelypeach/article/details/105060755

微信小程序开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现导航栏动态切换的方法，通过使用scroll-view组件结合bindtap事件，根据用户点击的不同导航项，更新当前激活的导航菜单索引。同时，通过请求后端接口获取导航数据，实现了导航栏的初始化加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

代码

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();
  },