<view style="display:inline-block;height:100%;width:30%;position:fixed;">
<scroll-view scroll-y="true" scroll-into-view="{{left_id}}" style="height:100%;">
<block wx:for="{{left}}" wx:key="code">
<view data-id="{{item.code}}" id="{{item.code}}" style="border-bottom:1rpx solid #808080;height:100rpx;" bindtap="setId">{{item.text}}</view>
</block>
</scroll-view>
</view>
<view style="height: 100%;background-color: lightblue;margin-left: 30%;">
<scroll-view scroll-y="true" scroll-into-view="{{left_id}}" bindscroll='scroll' style="height:1200rpx">
<block wx:for="{{right}}" wx:key="code">
<view data-id="{{item.code}}" id="{{item.code}}" bindtap="setId">
<block wx:for="{{item.list}}" wx:key="id">
<view id="{{item.id}}" style="height:250rpx;border-bottom:1rpx solid #000;">{{item.text}}</view>
</block>
</view>
</block>
</scroll-view>
</view>
js
// pages/webview/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
left: [
{ code: 'L1', text: "11" },
{ code: 'L2', text: "22" },
{ code: 'L3', text: "33" },
{ code: 'L4', text: "44" },
{ code: 'L5', text: "55" },
{ code: 'L6', text: "66" },
{ code: 'L7', text: "77" },
{ code: 'L8', text: "88" },
{ code: 'L9', text: "99" },
{ code: 'L10', text: "10" },
{ code: 'L11', text: "11" },
{ code: 'L12', text: "12" },
{ code: 'L13', text: "13" },
{ code: 'L14', text: "14" },
{ code: 'L15', text: "15" }
],
right: [
{
code: 'L1', text: "11",
list: [
{ id: '1', text: "111" },
{ id: '2', text: "1111" }
]
},
{
code: 'L2', text: "22",
list: [
{ id: '1', text: "222" },
{ id: '2', text: "2222" }
]
},
{
code: 'L3', text: "33",
list: [
{ id: '1', text: "333" },
{ id: '2', text: "3333" }
]
},
{
code: 'L4', text: "44",
list: [
{ id: '1', text: "444" },
{ id: '2', text: "4444" }
]
},
{
code: 'L5', text: "55",
list: [
{ id: '1', text: "555" },
{ id: '2', text: "5555" }
]
},
{
code: 'L6', text: "66",
list: [
{ id: '1', text: "666" },
{ id: '2', text: "6666" }
]
},
{
code: 'L7', text: "77",
list: [
{ id: '1', text: "777" },
{ id: '2', text: "7777" }
]
},
{
code: 'L8', text: "88",
list: [
{ id: '1', text: "888" },
{ id: '2', text: "8888" }
]
},
{
code: 'L9', text: "99",
list: [
{ id: '1', text: "999" },
{ id: '2', text: "9999" }
]
},
{
code: 'L10', text: "10",
list: [
{ id: '1', text: "1010" },
{ id: '2', text: "101010" }
]
},
{
code: 'L11', text: "11",
list: [
{ id: '1', text: "1111" },
{ id: '2', text: "111111" }
]
},
{
code: 'L12', text: "12",
list: [
{ id: '1', text: "1212" },
{ id: '2', text: "121212" }
]
},
{
code: 'L13', text: "13",
list: [
{ id: '1', text: "1313" },
{ id: '2', text: "131313" }
]
},
{
code: 'L14', text: "14",
list: [
{ id: '1', text: "1414" },
{ id: '2', text: "141414" }
]
},
{
code: 'L15', text: "15",
list: [
{ id: '1', text: "1515" },
{ id: '2', text: "151515" }
]
},
],
left_id: 'L1'
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
let query = wx.createSelectorQuery().in(this)
let heightArr = []
let s = 0
this.data.right.forEach(item => {
// console.log(item)
// 添加節(jié)點(diǎn)的布局位置的查詢請求
query.select('#'+item.code).boundingClientRect((rect) => {
// console.log(rect)
item.offsetTop = rect.top;
item.height = rect.height;
}).exec()
})
},
setId(e){
// console.log(e)
const that = this
that.setData({
left_id: e.currentTarget.dataset.id
})
},
scroll(e){
// console.log(e)
const that = this
that.data.right.forEach(item => {
// console.log(item)
if (e.detail.scrollTop >= (item.offsetTop - 55) && e.detail.scrollTop <= (item.offsetTop - 55 + item.height)) {
// that.setData({
// left_id: item.code
// })
}
})
}
})
16df2023d051541c (1).gif
