小程序scroll-view实现左右联动效果

<view class="context"> <view class="left"> <scroll-view scroll-y style="height: {{ height }}" scroll-top="{{ navScrollTop }}" scroll-into-view="item{{ currentIndex }}" > <view wx:for="{{ navList }}" wx:key="index" data-id="item{{index}}" data-index="{{ index }}" id="item{{index}}" class="{{ currentIndex == index ? 'active' : '' }}" catchtap="changeNav" > {{ item.title }} </view> </scroll-view> </view> <view class="right"> <scroll-view scroll-y style="height: {{ height }}" scroll-with-animation scroll-into-view = "{{ id }}" bindscroll='productScroll'> <view class="item" wx:for="{{ productList }}" wx:key="index" id='product-item{{index}}' > <view class="title"><text>{{ item.title }}</text></view> <view class="list" wx:for="{{ item.list }}" wx:for-item="list" wx:key="index"> <image src="{{ list.imgURL }}"></image> <text>{{ list.name }}</text> </view> </view> </scroll-view> </view> </view> .context { box-sizing: border-box; display: flex; } .context .left { box-sizing: border-box; } .context .left scroll-view { height: 100%; flex-shrink: 0 } .context .left view { font-size: 28rpx; height: 70rpx; line-height: 70rpx; background: #ccc; box-sizing: border-box; padding: 0 20rpx } .context .left view.active { color: #f00 } .context .right { text-align: center; font-size: 30rpx; font-weight: 700; flex: 1; line-height: 50rpx; } .context .list { box-sizing: border-box; display: flex; align-items: center; padding: 16rpx 24rpx; } .context image { width: 120rpx; height: 120rpx; } Page({ /** * 页面的初始数据 */ data: { navList: [ { title: '家用电器' }, { title: '家居用品' }, { title: '电脑办公' }, { title: '食品酒类' }, { title: '家用电器' }, { title: '家居用品' }, { title: '电脑办公' }, { title: '食品酒类' }, { title: '家用电器' }, { title: '家居用品' }, { title: '电脑办公' }, { title: '食品酒类' }, { title: '家用电器' }, { title: '家居用品' }, { title: '电脑办公' }, { title: '食品酒类' }, { title: '家用电器' }, { title: '家居用品' }, { title: '电脑办公' }, { title: '食品酒类' }, ], productList: [ { title: '家用电器', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' } ] }, { title: '家居用品', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' } ] }, { title: '电脑办公', list: [ { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' } ] }, { title: '食品酒类', list: [ { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' } ] }, { title: '家用电器', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' } ] }, { title: '家居用品', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' } ] }, { title: '电脑办公', list: [ { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' } ] }, { title: '食品酒类', list: [ { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' } ] }, { title: '家用电器', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' } ] }, { title: '家居用品', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' } ] }, { title: '电脑办公', list: [ { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' } ] }, { title: '食品酒类', list: [ { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' } ] }, { title: '家用电器', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' } ] }, { title: '家居用品', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' } ] }, { title: '电脑办公', list: [ { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' } ] }, { title: '食品酒类', list: [ { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' } ] }, { title: '家用电器', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/123928/6/5433/209490/5ef0cbb1Ebf5ab4d4/0cc539f436734768.jpg', name: '电冰箱' } ] }, { title: '家居用品', list: [ { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' }, { imgURL: '//img10.360buyimg.com/babel/s180x180_jfs/t1/4194/5/13106/142456/5bd6b776E4f71c562/b24fa6ae1fd8cc78.jpg', name: '暖手袋' } ] }, { title: '电脑办公', list: [ { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' }, { imgURL: '//img14.360buyimg.com/babel/s320x320_jfs/t1/115746/26/6173/67187/5eb8a9e1E47b8a8f8/27e0c5427c500df5.jpg!cc_320x320.webp', name: '复印机' } ] }, { title: '食品酒类', list: [ { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' }, { imgURL: '//img13.360buyimg.com/babel/s320x320_jfs/t1/4144/40/13914/164337/5bd950edEdf6d0ee2/4b3201824c121244.jpg!cc_320x320.webp', name: '食用油' } ] }, ], // 页面高度 height: '', currentIndex: 0, id: '', navScrollTop: 0 }, // 点击左侧导航栏 changeNav(event) { let $event = event.currentTarget.dataset; this.setData({ currentIndex: $event.index, id: 'product-' + $event.id, }) let $data = this.data; let itemHeight = parseInt($data.navList[0].height) // 滚动的临界值 let count = Math.floor(parseInt($data.height) / itemHeight); let scrollY = ($event.index + 1) * itemHeight; for(let i = 0; i < $data.navList.length; i++) { if($data.navList[i].offsetTop >= scrollY ) { this.setData({ navScrollTop: (i+1 - count) * itemHeight }); console.log($data.navList[i].offsetTop, $data.navScrollTop,scrollY) break } } // if($event.index == this.data.currentIndex) { return } }, // 监听右侧滚动 productScroll(event) { let currentScrollTop = event.detail.scrollTop; this.data.productList.map((item, index) => { // 确认临界值(涉及最外层元素有padding或margin时计算方式有所改变) if (currentScrollTop > item.offsetTop && currentScrollTop < item.offsetTop + item.height) { this.setData({ currentIndex: index }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.getSystemInfo({ success: (res) => { this.setData({ height: res.windowHeight + 'px' }) }, }); // 获取左侧每个分类元素的高度 this.data.navList.forEach((item,index) => { // 添加节点的布局位置的查询请求 wx.createSelectorQuery().select(`#item${index}`).boundingClientRect(rect => { item.offsetTop = rect.top; item.height = rect.height; }).exec() }) // 获取右侧产品每个元素的offsetTop值和自身高度 this.data.productList.forEach((item,index) => { // 添加节点的布局位置的查询请求 wx.createSelectorQuery().select(`#product-item${index}`).boundingClientRect(rect => { item.offsetTop = rect.top; item.height = rect.height; }).exec() }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

注：有个BUG，就是点击左侧导航栏倒数第二个时，active的class类名会添加到前一个，目前还没有解决，那个大佬路过帮忙看下。