微信小程序的scroll-view組件中，scroll-into-view 屬性可以指定滾動到指定id的位置。
<scroll-view class="content" scroll-y scroll-into-view="{{ intoIndex }}" scroll-with-animation>
intoIndex 值應為某子元素id（id不能以數(shù)字開頭），設置哪個方向可滾動，則在哪個方向滾動到該元素。scroll-y 是滑動方向。
下面寫個簡單的小實例，方便大家理解。
wxml：
<view class="box">
<scroll-view class="nav" scroll-y>
<view class="item {{indexId == index ? 'current' : ''}}" wx:for="{{navList}}" bindtap="scrollClick" data-id="{{index}}">{{index}}-{{item}}</view>
</scroll-view>
<scroll-view class="content" scroll-y scroll-into-view="{{intoIndex}}" scroll-with-animation>
<view wx:for="{{contentList}}" id="item{{index}}">{{index}}-{{item}}</view>
</scroll-view>
</view>
css：
.nav {
margin-top:100rpx;
width: 20%;
height: 100vh;
background: pink;
text-align: center;
}
.nav .item {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1px solid #ebebeb;
background: #fafafa;
}
.nav .current{
color:red;
}
.content {
width: 75%;
height: 100%;
position: absolute;
right: 0px;
top: 55px;
margin: 0 20rpx 0 20rpx;
box-sizing: border-box;
}
.content view {
height: 200rpx;
line-height: 200rpx;
border: 1px solid #ccc;
border-radius: 20rpx;
margin-top: 20rpx;
text-align: center;
}
js：
Page({
/**
* 頁面的測試數(shù)據(jù)
*/
data: {
navList: ["飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料","飲料"],
contentList: ["可樂", "雪碧", "芬達", "七喜", "冰紅茶", "冰綠茶", "茉莉花茶", "檸檬茶", "果粒橙", "茉莉蜜茶", "檸檬紅茶", "脈動", "紅牛", "酸梅湯", "北冰洋", "九龍齋", "王老吉", "沙棘汁", "鮮橙多", "元氣森林", "健力寶", "加多寶", "東方樹葉", "烏龍茶", "茉莉綠茶", "寶礦力", "拿鐵咖啡", "摩卡咖啡", "生椰拿鐵", "冰吸生椰", "美式咖啡", "焦糖瑪奇朵", "燕麥拿鐵", "絲絨拿鐵", "香草拿鐵", "榛果拿鐵", "卡布奇諾", "冷萃咖啡", "海鹽焦糖", "綿云拿鐵", "生酪拿鐵", "厚乳拿鐵", "抹茶燕麥拿鐵", "珍珠奶茶", "鮮百香雙響炮", "奶茶三兄弟", "椰果奶茶", "鮮百香雙響炮", "金鉆奶茶", "珍珠奶茶", "布丁奶茶", "奶茶三兄弟", "雙拼奶茶", "鮮百香雙響炮", "奶茶三兄弟", "燒仙草奶茶", "鮮百香雙響炮", "紅豆奶茶", "珍珠奶茶", "巧克力奶茶", "奶茶三兄弟"],
intoIndex: '',
indexId: 0
},
scrollClick: function (e) {
this.setData({
intoIndex: "item" + e.currentTarget.dataset.id,
indexId: e.currentTarget.dataset.id
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
效果圖：
QQ截圖20230825150153.png
