微信小程序滑动，点击居中导航栏

关注

原创最新推荐文章于 2026-05-15 09:33:55 发布 503 阅读 AI 写同款· GEO 优化 ›

手把手教你完成微信小程序顶部导航栏 微信小程序顶部导航栏十分常见、尤其是在新闻类的小程序里，常见的导航栏有可水平滑动导航栏、居中导航栏、平分导航栏，本文手把手教你完成水平导航栏。以《报修小程序源码》为基础拓展讲解平分导航栏 传送门：flask + mysql + 微信报修小程序源码获取最终实现结果如下：编写 wxml 页面编程思路：需要一个外层 view ，将内层水平的子 view 包含进来，保证内层 view 的... 阅读详情

wxml

<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <block wx:for="{{packInfo.packTypes}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
      <view class="nav-item {{idx == typeIndex ?'active':''}}" data-index="{{idx}}" bindtap="switchNav">{{navItem.name}}</view>
    </block>
</scroll-view>

 */
  data: {
    packInfo:[],
    // 类型下标
    typeIndex: 0,   
    navScrollLeft: 0, 
  },
  
  switchNav(event) {
    console.log('switchNav-windowWidth=' + this.data.windowWidth)
    var index = event.currentTarget.dataset.index;
    console.log('index=' + index)

    //每个tab选项宽度占1/5
    if(index==2){
      var move22 = this.data.windowWidth * 0.22;
    }else if(index>2){
      var move22  = (index - 1) * this.data.windowWidth * (0.22+(index/100));
    }else{
      var move22 = 0;
    }
    console.log('move22=' + move22)
    this.setData({
      navScrollLeft: move22,
      typeIndex: index
    }) 
    this.getPackInfo()
  },

/**
   * 生命周期函数--监听页面加载
   * 获取手机屏幕宽度
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({          
          windowWidth: res.windowWidth
        })
      },
    }) 
  },

wxss


.nav {
  margin-top: 10rpx;
    height: 60rpx;
    width:  100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 60rpx;
    background: #f7f7f7;
    white-space: nowrap;  
    font-size: 0.8rem;
}
.nav-item {
    width: 28%;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    margin-right: 20rpx;
}
.nav-item.active{
    color: red;
}

收录于