小程序实现锚点滑动

要在小程序中实现锚点的话，就要用到<scroll-view > 标签中的，scroll-into-view，详情可见文档https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html?search-key=scroll-into-view。

wxml：

<view class='scroll-box' style='height:{{ht}}px;'>
  <scroll-view scroll-y class='menu-tab' scroll-into-view="{{toView}}" scroll-with-animation="true">
    <block wx:for="{{tabList}}" wx:key="">
      <view class='item-tab {{item.checked ? "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab'>{{item.title}}</view>
    </block>
  </scroll-view>

  <scroll-view scroll-y style='height:{{ht}}px;' 
    scroll-with-animation="true" 
    bindscrolltoupper="upper" 
    bindscrolltolower="lower" 
    bindscroll="scrollRight" 
    scroll-into-view="{{toViewRt}}">
    <block wx:for="{{contList}}" wx:key="">
      <view class='cont-box' id="t{{index}}" style='height:{{ht}}px;'>{{item.cont}}</view>
    </block>
  </scroll-view>
</view>

wxss:

.scroll-box{display: flex;flex-wrap: nowrap;}
.menu-tab{
  width: 180rpx;
  text-align: center;
  height: 100%;
  color: #666;
  border-right:1rpx solid #999
  
}
.item-tab{
  font-size:28rpx;
  padding:8rpx;
}
.cont-box{
  border-top: 1px solid;
  box-sizing: border-box;
}
.item-act{
  background: linear-gradient(to bottom right, #6C53B1 , #8B2EDF);
  color: #fff;
  border-radius: 100px;
}

js:

var app = getApp();


Page({
  data: {
    current: 0, 
    // 左侧菜单
    tabList: [
      { title: 'tab1', checked: true },
      { title: 'tab2', checked: false },
      { title: 'tab3', checked: false },
      { title: 'tab4', checked: false },
      { title: 'tab5', checked: false },
      { title: 'tab6', checked: false },

    ],
    // 右侧内容
    contList: [
      { cont: 'tab1'},
      { cont: 'tab2'},
      { cont: 'tab3'},
      { cont: 'tab4'},
      { cont: 'tab5'},
      { cont: 'tab6'},
  
    ],
  },

  // 循环切换
  forTab(index) {
    let lens = this.data.tabList.length;
    let _id = 't' + index;
    for (let i = 0; i < lens; i++) {
      this.data.tabList[i]['checked'] = false;
    }
    this.data.tabList[index]['checked'] = true;
    this.setData({
      tabList: this.data.tabList,
      toView: _id,
      current: index
    });
  },

  // 点击左侧菜单栏
  intoTab(e) {
    let lens = this.data.tabList.length;
    let _index = e.currentTarget.dataset.index;
    this.forTab(_index);
    let _id = 't' + _index;
    this.setData({
      toViewRt: _id
    });
  },

  // 滚动右侧菜单
  scrollRight(e) {
    //console.log(e)
    let _top = e.detail.scrollTop;
    let progress = parseInt(_top / this.data.ht); // 计算出 当前的下标
    if (progress > this.data.current) { // 向上拉动屏幕

      this.setData({ current: progress });
      this.forTab(this.data.current);
    } else if (progress == this.data.current) {
      return false;
    } else { // 向下拉动屏幕

      this.setData({
        current: progress == 0 ? 0 : progress--
      });
      this.forTab(progress);
    }
  },

  onLoad: function (options) {
    console.log(this.data.tabList)
    // 框架尺寸设置
    wx.getSystemInfo({
      success: (options) => {
        var wd = options.screenWidth; // 页面宽度
        var ht = options.windowHeight; // 页面高度
        this.setData({ wd: wd, ht: ht })
      }
    });
  },

  onShow: function () {
    // 初始化状态
    this.setData({
      toView: 't' + this.data.current,
      toViewRt: 't' + this.data.current
    })
  }, 
 
})