微信小程锚点定位、右侧滑动左侧跟随滑动

<view class="page">
 <import src="../../components/catering-item/catering-item.wxml" />
<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view class="body">
<view style='float: left' class='left'>
 <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY'  style='height: {{winHeight}}px'>
  <view class='all clear'>
   <block wx:key="tabs" wx:for="{{tabs}}">
    <view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'>
     <view class="text-style {{indexId==index?' activeView':''}}">
      <text class="{{indexId==index?'active1':''}}">{{item.title}}</text>
     </view>
    </view>
   </block>
  </view>
 </scroll-view>
</view>
<!-- style='height: {{winHeight}}px' -->
<view class="right" style='height: {{winHeight}}px'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
  <block wx:key="tabs" wx:for="{{tabs}}">
  <view id="view-{{item.anchor}}">
     <view class="title" id="title-{{item.anchor}}">
     {{item.title}}
     </view>
     <view class="orders" wx:for="{{tabsList[item.anchor]}}">
      <!-- <template is="cateringItem" data="{{...item}}" /> -->
      <view style="height: 500rpx;">{{item.price}}</view>
     </view>
    </view>
  </block>
 </scroll-view>
 </view>
</view>
</view>

.page {
 display: flex;
 flex-direction: column;
 width: 100%;
 /* background: #F7F4F8; */
 background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
 /* padding-top: 16px; */
}
.under_line{
 width: 100%;
 border-top: 1rpx solid #efefef;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
 
.body{
 display: flex; 
 width: 100%;
}
 
.scrollY {
 width: 200rpx;
 /* position: fixed;
 left: 0;
 top: 0; */
 background: #F5F5F5;
 /* border-right: 1rpx solid #efefef; */
}
 
/* scrollRight{
 flex: 1;
} */
.right{
 flex: 1;
 /* height: 200rpx; */
 /* background: #00FF00; */
}
 
.left {
 border-top: 1rpx solid #efefef;
 border-right: 1rpx solid #efefef;
}
 
.text-style {
 width: 200rpx;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 28rpx;
 font-family: PingFangSC-Semibold;
 color: rgba(51, 51, 51, 1);
}
 
.active1 {
 color: #E5D1A9;
 /* background: #FFF; */
}
.activeView{
  background: #FFF;
}
 
.active {
 display: block;
 width: 50rpx;
 height: 6rpx;
 background: #E5D1A9;
 position: relative;
 left: 75rpx;
 bottom: 30rpx;
}
.title{
 margin-left: 32rpx;
 padding-top: 16rpx;
 font-size: 28rpx;
 /* padding-bottom: 16rpx; */
}

// pages/catering.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [{
        title: '特惠',
        anchor: 'a',
      },
      {
        title: '必点',
        anchor: 'b',
      },
      {
        title: '营养汤',
        anchor: 'c',
      },
      {
        title: '主食',
        anchor: 'd',
      },
      {
        title: '套餐',
        anchor: 'e',
      },
      {
        title: '饮料',
        anchor: 'f',
      },
    ],
    tabsList: {
      a: [{
          price: 10.1,
          anchor: "a",
          index: 0,
          num: 0
        }, {
          price: 10.2,
          anchor: "a",
          index: 1,
          num: 0
        },
        {
          price: 10.3,
          anchor: "a",
          index: 2,
          num: 0
        },
      ],
      b: [{
          price: 10.4,
          anchor: "b",
          index: 0,
          num: 0
        }, {
          price: 10.5,
          anchor: "b",
          index: 1,
          num: 0
        },
        {
          price: 10.6,
          anchor: "b",
          index: 2,
          num: 0
        },
      ],
      c: [{
          price: 10.7,
          anchor: "c",
          index: 0,
          num: 0
        }, {
          price: 10.8,
          anchor: "c",
          index: 1,
          num: 0
        },
        {
          price: 10.9,
          anchor: "c",
          index: 2,
          num: 0
        },
      ],
      d: [{
          price: 11.0,
          anchor: "d",
          index: 0,
          num: 0
        }, {
          price: 11.1,
          anchor: "d",
          index: 1,
          num: 0
        },
        {
          price: 11.2,
          anchor: "d",
          index: 2,
          num: 0
        },
      ],
      e: [{
          price: 11.3,
          anchor: "e",
          index: 0,
          num: 0
        }, {
          price: 11.4,
          anchor: "e",
          index: 1,
          num: 0
        },
        {
          price: 11.5,
          anchor: "e",
          index: 2,
          num: 0
        },
      ],
      f: [{
          price: 11.6,
          anchor: "f",
          index: 0,
          num: 0
        }, {
          price: 11.7,
          anchor: "f",
          index: 1,
          num: 0
        },
        {
          price: 11.8,
          anchor: "f",
          index: 2,
          num: 0
        },
      ]
    },
    indexId: 0,
    toTitle: "title-c",
    scrollTop: 0,
    top: [],
  },
  // 左侧点击事件
  jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex;
    let anchor = e.currentTarget.dataset.anchor;
    let that = this
    that.setData({
      indexId: index,
      toTitle: "title-" + anchor
    });
    //可以设置定位事件

  },

  scrollToLeft(res) {
    console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));
    // let top=res.detail.scrollTop;
    this.setData({
      scrollTop: res.detail.scrollTop
    })
    let {
      length
    } = this.data.top;
    for (let i = 0; i < this.data.top.length; i++) {
      if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)) {
        if (this.data.indexId != i) {
          this.setData({
            indexId: i,
          });
        }
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winHeight: res.windowHeight
        });
        let top2 = new Array();
        for (let i = 0; i < that.data.tabs.length; i++) {
          wx.createSelectorQuery().select('#view-' + that.data.tabs[i].anchor).boundingClientRect(function (rect) {
            let isTop = Number(rect.top);
            top2.push(isTop);
            console.log("高度:",top2)
            console.log("view-c:" + JSON.stringify(rect));
          }).exec();
        }
        that.setData({
          top: top2
        });
        
      }
    });
  }
})