微信小程序利用scroll-view实现左右联动,供大家参考,具体内容如下 点击左边的按钮时,右边可以跳动到指定的位置 首先要注意使用scroll-view竖屏滚动,需要给
微信小程序利用scroll-view实现左右联动,供大家参考,具体内容如下
点击左边的按钮时,右边可以跳动到指定的位置
滚动右边,左边菜单跳到相应的位置
实现效果图:
主要代码如下:
index.wxml
<view class="container">
<view class="cateGory-left">
<scroll-view scroll-y="true" style="height:100%">
<block wx:for="{{category}}" wx:key="id">
<view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
</block>
</scroll-view>
</view>
<view class="category-right">
<scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
<view class="categoty-detail">
<block wx:for="{{content}}" wx:key="id">
<view class="catefory-main">
<view class="category-title" id="{{item.id}}">{{item.title}}</view>
<view class="category-content">
<view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
<image src="{{i.src}}"></image>
<text>{{i.text}}</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
toView: 'a1',
activeId: 'a1',
category: [
{name: '新品', id: 'a1'},
{ name: '众筹', id: 'a2' },
{ name: '小米手机', id: 'a3' },
{ name: 'redmi手机', id: 'a4' },
{ name: '黑鲨游戏', id: 'a5' },
{ name: "手机配件", id: 'a6' },
{ name: '电视', id: 'a7'},
{ name: '电脑', id: 'a8' },
],
content: [
{
title: '- 新品 -',
options: [
{ src: '../../image/redmi.png',id: '001',text: 'redmi8'},
{ src: '../../image/redmi.png', id: '002', text: 'redmi8A' },
{ src: '../../image/redmi.png', id: '003', text: '小米9pro 5G'},
{ src: '../../image/redmi.png', id: '004', text: 'redmi8'},
{ src: '../../image/redmi.png', id: '005',text: 'redmi8' }
],
id: 'a1'
},
{
title: '- 众筹 -',
options: [
{ src: '../../image/zhongchou.png', id: '006', text: 'redmi8' },
{ src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},
{ src: '../../image/zhongchou.png', id: '008', text: 'redmi8' },
{ src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }
],
id: 'a2'
},
{
title: '- 小米手机 -',
options: [
{ src: '../../image/xiaomi.png', id: '006', text: 'redmi8' },
{ src: '../../image/xiaomi.png', id: '007', text: 'redmi8' },
{ src: '../../image/xiaomi.png', id: '008', text: 'redmi8' },
{ src: '../../image/xiaomi.png', id: '009', text: 'redmi8' }
],
id: 'a3'
},
{
title: '- redmi手机 -',
options: [
{ src: '../../image/hongmi.png', id: '006', text: 'redmi8' },
{ src: '../../image/hongmi.png', id: '007', text: 'redmi8' },
{ src: '../../image/hongmi.png', id: '008', text: 'redmi8' },
{ src: '../../image/hongmi.png', id: '009', text: 'redmi8' }
],
id: 'a4'
}
],
},
//事件处理函数
onLoad: function () {
this.setData({
toView: 'a1',
heightArr: []
})
let query = wx.createSelectorQuery();
query.selectAll('.catefory-main').boundingClientRect((rect)=> {
rect.forEach(ele => {
this.calculateHeight(ele.height);
})
}).exec();
},
clickItem(e) {
this.setData({
activeId: e.currentTarget.dataset.id,
toView: e.currentTarget.dataset.id
})
},
scroll(e) {
let scrollHeight = e.detail.scrollTop;
let index = this.calculateIndex(this.data.heightArr,scrollHeight);
this.setData({
activeId: 'a'+index
})
},
// 计算滚动的区间
calculateHeight(height) {
if(!this.data.heightArr.length) {
this.data.heightArr.push(height)
}else {
this.data.heightArr.forEach(ele => {
height += ele
})
this.data.heightArr.push(height);
}
},
// 计算左边选中的下标
calculateIndex(arr, scrollHeight) {
let index= '';
for(let i =0;i<arr.length;i++) {
if (scrollHeight >= 0 && scrollHeight < arr[0]){
index = 0;
}else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
index = i;
}
}
return index+1;
}
})
index.wxss
.container {
padding: 0;
width:100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.category-left {
height: 100%;
width: 22%;
padding: 0 20rpx;
box-sizing: border-box;
border-right: 1px solid #efefef;
}
.catgegory-item {
padding: 20rpx 0;
font-size: 30rpx;
text-align: center;
}
.active-item {
color: orange;
}
.category-right {
flex:1;
height: 100%;
}
.category-content {
display: grid;
grid-template-columns: repeat(auto-fill, 190rpx);
}
.category-title {
text-align: center;
}
.content-item {
display: flex;
flex-direction: column;
padding: 20rpx;
text-align: center;
font-size: 30rpx;
}
.content-item image{
width: 120rpx;
height: 120rpx;
}
--结束END--
本文标题: 微信小程序scroll-view实现左右联动效果
本文链接: https://www.lsjlt.com/news/136593.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0