微信小程序-tab导航栏横向滑动，对应详情长页锚点跳转

tab导航栏可以横向滑动，竖屏滑动到当前模块时对应的tab变色 图标更改  同时当前tab会跟随处于tab栏中间；点击tab时当前tab变色，锚点跳转到对应页面。

参考了别人大神的代码，tab带图标并能选中改变的没找到，自己做了修改。

 

参考的链接：https://www.cnblogs.com/xsffliu/p/11097846.html 感谢~

 

wxml部分：

1.导航

 <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
                <view class='tab-item {{nowstatus == "productBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{0}}" data-hash="productBox">
                  <image data-current="{{0}}" data-hash="productBox"  wx:if="{{currentTab == 0}}" src="../../image/lx-icon/zdrypf-xz.png" class="img"></image>
                  <image data-current="{{0}}" data-hash="productBox" wx:else src="../../image/lx-icon/zdrypf-wxz.png" alt="" class="img"></image>
                    导航1
                </view>
                <view class='tab-item {{nowstatus == "commentBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{1}}" data-hash="commentBox">
                    <image data-current="{{1}}"  data-hash="commentBox" wx:if="{{currentTab == 1}}" src="../../image/lx-icon/cpws-xz.png" class="img"></image>
                    <image data-current="{{1}}" data-hash="commentBox" wx:else src="../../image/lx-icon/cpws-wxz.png" alt="" class="img"></image>
                     导航2
                 </view>
                <view class='tab-item {{nowstatus == "infoBox" ? "active" : ""}}' bindtap="toViewClick" data-current="{{2}}" data-hash="infoBox">
                     <image  data-current="{{2}}"  data-hash="infoBox" wx:if="{{currentTab == 2}}" src="../../image/lx-icon/zxgg-xz.png" class="img"></image>
                     <image  data-current="{{2}}" data-hash="infoBox"  wx:else src="../../image/lx-icon/zxgg-wxz.png" alt="" class="img"></image>
                      导航3
                </view>
                <view class='tab-item {{nowstatus == "infoBox2" ? "active" : ""}}' bindtap="toViewClick" data-current="{{3}}" data-hash="infoBox2">
                   <image  data-current="{{3}}" data-hash="infoBox2"  wx:if="{{currentTab == 3}}" src="../../image/lx-icon/wdhmd-xz.png" class="img"></image>
                   <image  data-current="{{3}}" data-hash="infoBox2" wx:else  src="../../image/lx-icon/wdhmd-wxz.png" alt="" class="img"></image>
                    导航4
                 </view>
                 <view class='tab-item {{nowstatus == "infoBox2" ? "active" : ""}}' bindtap="toViewClick" data-current="{{4}}" data-hash="infoBox2">
                    <image  data-current="{{4}}" data-hash="infoBox3"  wx:if="{{currentTab == 4}}" src="../../image/lx-icon/xzcf-xz.png" class="img"></image>
                    <image  data-current="{{4}}" data-hash="infoBox3" wx:else  src="../../image/lx-icon/xzcfbf-wxz.png" alt="" class="img"></image>
                    导航5
           </view>
      
        </scroll-view>

2.详情部分

   <scroll-view class="box" style="height:{{winHeight}}" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
      <view id="productBox">主体1</view>
      <view id="commentBox">主体2</view>
      <view id="infoBox">主体3</view>
      <view id="infoBox2">主体4</view>
      <view id="infoBox3">主体5</view>
    </scroll-view>

 

wxss部分：

page{
  height:100%;
}
.box{height:100%; padding-top:60rpx; position: absolute;}
.box view{
  height:1500rpx;
  text-align: center;
  background-color: #ccc;
}

.nav-box {
  height: 231rpx;
  position: relative;
}


.tab {
  width: 100%;
  height: 231rpx;
  z-index: 100;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 100rpx;
  padding-top: 45rpx;
  padding-left: 35rpx;
  padding-right: 35rpx;
  box-sizing: border-box;
}

.tab-item {
  display: inline-block;
  width: 23%;
  font-size: 24rpx;
  text-align: center;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7C7C7C;
  /* margin-right: 20rpx; */
  line-height: 80rpx;
}

.active {
  color: #0763DA;
}

js部分：

//index.js
//获取应用实例
Page({
  data: {
    winHeight:'100%',
    toView:'',
    nowstatus:'',
    currentTab: '',
    productBoxTop: '',
    commentBoxTop: '',
    infoBoxTop: '',
    infoBox2Top:'',
    infoBox3Top: '',
    names:1,
  },
  onLoad: function (options) {
    wx.getSystemInfo({ 
      // 获取当前设备的宽高，文档有
          success: (res) => {
            this.setData({
              windowHeight: res.windowHeight,
              windowWidth: res.windowWidth
            })
          },
        })
    let that=this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        that.setData({
          winHeight: res.windowHeight*2 - (res.windowWidth * 90 / 750) + 'rpx'
        })
      },
    }),
      wx.createSelectorQuery().select('#productBox').boundingClientRect(res => { //获取评论距离页面顶部高度
        that.setData({
          productBoxTop: res.top
        })
      }).exec()
    wx.createSelectorQuery().select('#commentBox').boundingClientRect(res => { //获取评论距离页面顶部高度
      that.setData({
        commentBoxTop: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBoxTop: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox2').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBox2Top: res.top
      })
    }).exec()
    wx.createSelectorQuery().select('#infoBox3').boundingClientRect(res => { //获取详情部分距离页面顶部高度
      that.setData({
        infoBox3Top: res.top
      })
    }).exec()
    
  },
 
  toViewClick:function(e){
    this.setData({
      toView: e.target.dataset.hash,
      nowstatus: e.target.dataset.hash,
      currentTab:e.target.dataset.current
    })
    var current = e.target.dataset.current; //获取当前tab的index
    // 导航tab共5个，获取一个的宽度
    var tabWidth = this.data.windowWidth / 5;

    this.setData({
      tabScroll: (current - 2) * tabWidth//使点击的tab始终在居中位置
    })
  },
  onPageScroll: function (e) {
    var that = this;
    if (e.detail.scrollTop > that.data.productBoxTop - 360 && e.detail.scrollTop < that.data.commentBoxTop - 361) {
      var tabWidth = this.data.windowWidth / 5;

      this.setData({
        nowstatus: 'productBox',
        currentTab: 0,
        tabScroll: (0 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.commentBoxTop - 360 && e.detail.scrollTop < that.data.infoBoxTop - 361) {
      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'commentBox',
        currentTab: 1,
        tabScroll: (1 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBoxTop - 360 && e.detail.scrollTop < that.data.infoBox2Top - 361) {

      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox',
        currentTab: 2,
        tabScroll: (2 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBox2Top - 360 && e.detail.scrollTop < that.data.infoBox3Top - 361) {

      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox2',
        currentTab: 3,
        tabScroll: (3 - 2) * tabWidth,
      })
    }
    if (e.detail.scrollTop > that.data.infoBox3Top - 360) {

      var tabWidth = this.data.windowWidth / 5;
      this.setData({
        nowstatus: 'infoBox3',
        currentTab: 4,
        tabScroll: (4 - 2) * tabWidth,
      })
    }
   
  },
})