實現該功能的思路：通過點擊左側滑欄的某一項，獲取到該元素攜帶的 id ，然后動態傳給右側滑欄的 scroll-into-view ，從而實現右側滑欄對應的該元素運動置頂。
以下為完整數據
數據格式：
var list = {
? "List": [
? ? {
? ? ? 'A': [
? ? ? ? { name: '白酒' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'B': [
? ? ? ? { name: '白酒1' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'C': [
? ? ? ? { name: '白酒2' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'D': [
? ? ? ? { name: '白酒3' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'E': [
? ? ? ? { name: '白酒4' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'F': [
? ? ? ? { name: '白酒5' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'G': [
? ? ? ? { name: '白酒6' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'H': [
? ? ? ? { name: '白酒7' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'I': [
? ? ? ? { name: '白酒8' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'J': [
? ? ? ? { name: '白酒9' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'K': [
? ? ? ? { name: '白酒10' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'L': [
? ? ? ? { name: '白酒11' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ],
? ? ? 'M': [
? ? ? ? { name: '白酒12' },
? ? ? ? { 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },
? ? ? ? { 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },
? ? ? ? { 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },
? ? ? ? { 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }
? ? ? ]
? ? }
? ],
}
module.exports = list;
wxml內容：
<view class="container">?
? <!--左側欄-->
? <scroll-view class='scroll_left' scroll-y="true">
? ? <view class="nav_left">
? ? ? <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">?
? ? ? ? <!--當前項的id等于item項的id，那個就是當前狀態-->?
? ? ? ? <!--用data-index記錄這個數據在數組的下標位置，使用data-id設置每個item的id值，供打開右側側滑欄使用-->?
? ? ? ? <view class="nav_left_items {{curNav == idx ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}">{{itemName[0].name}}</view>?
? ? ? </block>?
? ? </view>
? </scroll-view>
? <!--右側欄-->
? <!--如果使用 scroll-into-view 屬性，必須設置 scroll-view 的高度，且最好是動態獲取屏幕高度 -->
? <!-- scroll-into-view 屬性 值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素 -->
? <scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true">
? ? <view class="nav_right">
? ? ? <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this" bindscroll="scrollTop">
? ? ? ? <view class='minl' id='{{idx}}'>{{itemName[0].name}}</view>
? ? ? ? ? <block wx:for="{{itemName}}" wx:for-index="idex" wx:key="*this" >
? ? ? ? ? ? <view class="nav_right_items" wx:if="{{idex>0}}">?
? ? ? ? ? ? ? <navigator url="../detail/detail" hover-class="other-navigator-hover">
? ? ? ? ? ? ? ? <view>?
? ? ? ? ? ? ? ? ? <image src="{{item.picture}}"></image>
? ? ? ? ? ? ? ? ? <view >?
? ? ? ? ? ? ? ? ? ? <text>{{item.desc}}</text>?
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? </view>?
? ? ? ? ? ? ? </navigator>?
? ? ? ? ? ? </view>? ? ?
? ? ? ? ? </block>
? ? ? ? </view>
? ? ? <view style="width:100%;height:30rpx;background:#f0f4f7"></view>? ? ?
? ? </view>
? </scroll-view>
</view>?
js內容：
// pages/list-1/list-1.js
var list = require('../../utils/list.js')
Page({
? data: {
? ? // 左側點擊類樣式
? ? curNav: 'A',
? },
? onReady: function () {
? ? // 生命周期函數--監聽頁面初次渲染完成
? ? var listChild1 = list.List[0];
? ? var that = this;
? ? // 獲取可視區高度
? ? wx.getSystemInfo({
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? list: listChild1,
? ? ? ? ? winHeight: res.windowHeight,
? ? ? ? })
? ? ? }
? ? })
? },
? //點擊左側 tab ，右側列表相應位置聯動 置頂
? switchRightTab: function (e) {
? ? var id = e.target.id;
? ? console.log(typeof id)
? ? this.setData({
? ? ? // 動態把獲取到的 id 傳給 scrollTopId
? ? ? scrollTopId: id,
? ? ? // 左側點擊類樣式
? ? ? curNav:id
? ? })
? }
})?
?
wxss代碼 (樣式可能會不全，需要引入weui.wxss文件)
/* pages/listers/listers.wxss */
/* pages/list-1/list-1.wxss */
/*總體主盒子*/?
.container {?
? position: relative;?
? width: 100%;?
? height: 1220rpx;?
? background-color: #f0f4f7;?
? color: #939393;?
}?
?
/*左側欄主盒子*/?
.nav_left{?
? /*設置行內塊級元素（沒使用定位）*/?
? display: inline-block;?
? width: 100%;?
? height: 100%;?
? /*主盒子設置背景色為灰色*/?
? background: #fff;?
? text-align: center;?
? /* position: fixed;? */
? left: 0;
? top: 0;
? border-top: 1rpx solid #dedede;
}?
/*左側欄list的item*/?
.nav_left .nav_left_items{?
? background: #fff;
? /*每個高30px*/?
? height: 80rpx;?
? /*垂直居中*/?
? line-height: 80rpx;?
? /*再設上下padding增加高度，總高42px*/?
? padding: 15rpx 0;?
? /*只設下邊線*/?
? border-bottom: 1px solid #dedede;?
? /*文字14px*/?
? font-size: 29rpx;
? color: #101010;?
? font-weight:
}?
/*左側欄list的item被選中時*/?
.nav_left .nav_left_items.active{?
? /*背景色變成白色*/?
? background: #f0f4f7;
? color: #ed1000;?
}?
?
/*右側欄主盒子*/?
.scroll_right{?
? /*右側盒子使用了絕對定位*/?
? position: fixed;
? top: 0;?
? right: 0;
? overflow: auto;
? flex: 1;?
? /*寬度75%，高度占滿，并使用百分比布局*/?
? width: 75%;?
? height: 100%;?
? padding: 20rpx;?
? box-sizing: border-box;?
? background-color: #f0f4f7;
? border-top: 1rpx solid #dedede;
}
.mink::after{
? display:block;content:'';clear:both;
}
.jiul,.jiul image{
? width: 100%;
? height: 170rpx;
}
.minl{
? font-size: 29rpx;
? color: #777;
? text-align: left;
? line-height: 60rpx;
? float: left;
? background: #f0f4f7;
? width: 100%;
? /* height: 50rpx;? */
}
.mink{
? width: 100%;
? background: #fff;
? height: 100%;
}
/*右側欄list的item*/?
.nav_right_items{?
? /*浮動向左*/?
? float: left;?
? /*每個item設置寬度是33.33%*/?
? width: 50%;?
? /* height: 160rpx;? */
? text-align: center;
? color: #4a4a4a;
? background: #fff;
}?
.nav_right_items image{?
? /*被圖片設置寬高*/?
? width: 60px;?
? height: 50px;
? margin-top: 15rpx;
}?
.nav_right_items text{?
? /*給text設成塊級元素*/?
? display: block;?
? margin-top: 5rpx;?
? margin-bottom: 10rpx;
? font-size: 26rpx;?
? /*設置文字溢出部分為...*/?
? overflow: hidden;?
? white-space: nowrap;?
? text-overflow: ellipsis;?
}
/** 自定義其他點擊態樣式類 **/
.other-navigator-hover{
? background:#fff;
}
.scroll_left{
? width:25%;
? height:100%;
? background:#fff;
? text-align:center;
? position: fixed;
? left: 0;top: 0
}
