简介： 项目中有一个功能，像今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能

效果

实现过程:

tab导航栏 <scroll-view>标签，内容使用<swiper>

wxml

    <view class="containers">
      <!-- tab导航栏 -->
      <!-- scroll-left属性可以控制滚动条位置 -->
      <!-- scroll-with-animation滚动添加动画过渡 -->
      <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <block wx:for="{{modleList}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
          <view class="nav-items nav-item{{idx}} navitems{{idx}}  {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
            <text class="text-title {{currentTab == idx?'selects':''}}">{{navItem.name}}</text>
          </view>
        </block>
      </scroll-view>
      <!-- 页面内容 -->
      <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
        <swiper-item wx:for="{{modleList}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content" scroll-x='true' style="width:100%;">
          <view class="c-list">
           <block>
             <view  class="c-item model-item">
                 <image src="{{tabItem.urls}}"></image>
             </view>
           </block>
          </view>
        </swiper-item>
      </swiper>
    </view>

js


Page({

  data: {
    currentTab: 0,
    navScrollLeft: 0,
    modleList: [
      {
        "name": "模块一",
        "urls": "http://img4.imgtn.bdimg.com/it/u=423551398,1303118808&fm=26&gp=0.jpg"
      },
      {
        "name": "模块二",
        "urls": "http://img2.imgtn.bdimg.com/it/u=3365093992,2526641564&fm=26&gp=0.jpg"
      },
      {
        "name": "模块三",
        "urls": "http://img0.imgtn.bdimg.com/it/u=2213244297,14939061&fm=26&gp=0.jpg"
      },
      {
        "name": "模块四",
        "urls": "http://img4.imgtn.bdimg.com/it/u=3762120152,4041020232&fm=26&gp=0.jpg"
      },
      {
        "name": "模块五",
        "urls": "http://img2.imgtn.bdimg.com/it/u=1889032813,1753990189&fm=26&gp=0.jpg"
      },
      {
        "name": "模块六",
        "urls": "http://img4.imgtn.bdimg.com/it/u=1435609199,2696310551&fm=26&gp=0.jpg"
      },
      
    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 5;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  switchTab(event) {
    var cur = event.detail.current;
    var singleNavWidth = this.data.windowWidth / 5;
    this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 2) * singleNavWidth
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (e) {

  },

})

css

/* page/home/home.wxss */
.containers{
  margin-top: 300rpx;
}

.c-list{
  display: flex;  
}
.potion-list{
  display: flex;
}
.c-item {
  width:680rpx;
  height: 410rpx;
  position: relative;
  color: #fff;
  margin-bottom: 30rpx;
}
.nav {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    font-size: 16px;
    white-space: nowrap;
    color: #999;
    margin-top: -50rpx;
   display: flex;
   padding: 0 30rpx;
}


.nav-items{
    width: 18%;
    display: inline-block;
    text-align: center;
    margin-left:0rpx;
}
.active{
    color: #000;
     font-weight: 700;
      height: 60rpx;         
}
 .selects{
     border-bottom: 3rpx solid red;
}
.tab-box{
  width: 100vw;
  height: 590rpx;
  box-sizing: border-box;  
}
.tab-content{
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    padding-top: 20rpx;
    margin-right: 20rpx;
}

.content{
    overflow-y: scroll;          
}
.codekongbai{
  margin-top:200rpx;
  display: block;
  width: 100%;
  overflow-y: scroll; 
}

.model-item image{
  width: 100%;
  height: 100%;
   border-radius: 20rpx;

}