微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

<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>
<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>
    </view>
  </block>
 </scroll-view>
 </view>
</view>
</view>

@import "../../components/catering-item/catering-item.wxss";
/* pages/catering.wxss */
.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
  })
  var length = this.data.top.length;
  for(var 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,
     }); 
    }
   }
  }
  // console.log("top:"+top);
 },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onload: function (options) {
   var that = this
   wx.getsysteminfo({
    success: function (res) {
     that.setdata({
      winheight: res.windowheight
     });
     var top2=new array();
     for(var i=0;i<that.data.tabs.length;i++){
      wx.createselectorquery().select('#view-' + that.data.tabs[i].anchor).boundingclientrect(function (rect) {
       
       var istop=number(rect.top);
       
       top2.push(istop);
       console.log("view-c:" + json.stringify(rect));
       
      }).exec();
      
     } 
     that.setdata({
      top: top2
     });
    }
    
   });
   
  },
 
})