1.wxml程式碼：

<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>

2.wxss程式碼：

@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,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; */
}

3.js程式碼

// 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,index: 1,{
    price: 10.3,index: 2,b: [{
    price: 10.4,anchor: "b",{
    price: 10.5,{
    price: 10.6,c: [{
    price: 10.7,anchor: "c",{
    price: 10.8,{
    price: 10.9,d: [{
    price: 11.0,anchor: "d",{
    price: 11.1,{
    price: 11.2,e: [{
    price: 11.3,anchor: "e",{
    price: 11.4,{
    price: 11.5,f: [{
    price: 11.6,anchor: "f",{
    price: 11.7,{
    price: 11.8,]
  },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
     });
    }
    
   });
   
  },})

說明：

wxml中的template是菜品的item，可根據自己的需求進行定義。

使用到scroll-view的scroll-into-view屬性用於對左側選單種類點選定位到右側選單的具體位置，js中的jumpIndex為使用者點選左側選單，對應選中位置改變，和對右側選單進行定位。

js中scrollToLeft用於實現使用者滾動右側選單，對左側選單分類進行定位操作，主要思想是將右側選單中的種類標籤的top位置記錄下來，當右側scroll-view滑動的位置小於等於某一個top，而大於下一個top時，則更換左側種類選單到指定位置。

總結

到此這篇關於微信小程式scroll-view實現滾動到錨點左側導航欄點餐功能(點選種類,滾動到錨點)的文章就介紹到這了,更多相關微信小程式 scroll-view實現滾動到錨點內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！