微信公众号开发
微信小程序左右联动
本文主要是介绍微信小程序左右联动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
好记性不如烂笔头
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 wx:if="{{activeId == item.id}}" class="lvtiao"></view>
</view>
</block>
</scroll-view>
</view>
<view class="category-right">
<scroll-view scroll-y="true" style="height:100%;background-color: #fff;" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
<view style="height:24rpx;"></view>
<view class="lunbo">
<swiper class="fuli_lunbo" circular="{{true}}" indicator-dots="{{false}}" autoplay="{{true}}" duration="{{1000}}" interval="{{8000}}">
<swiper-item wx:for="{{qing_list}}" wx:key="key">
<image class="shu_tu" src="../../images/baoxiu.png"></image>
</swiper-item>
</swiper>
</view>
<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>
<view class="mingiz">{{i.text}}</view>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
js
const app = getApp()
Page({
data: {
qing_list:["1","2"],
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: '电脑8', id: 'a8' },
{ name: '电脑9', id: 'a9' },
{ name: '电脑10', id: 'a10' },
{ name: '电脑11', id: 'a11' },
{ name: '电脑12', id: 'a12' },
{ name: '电脑13', id: 'a13' },
],
content: [
{
title: '- 新品 -',
options: [
{ src: '../../images/baoxiudan.png',id: '001',text: 'redmi8aaaaaaaaaaaaaaaaaaaaa'},
{ src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' },
{ src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'},
{ src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'},
{ src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' }
],
id: 'a1'
},
{
title: '- 众筹 -',
options: [
{ src: '../../images/duihuan.png', id: '006', text: 'redmi8' },
{ src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'},
{ src: '../../images/duihuan.png', id: '008', text: 'redmi8' },
{ src: '../../images/duihuan.png', id: '009',text: 'redmi8' }
],
id: 'a2'
},
{
title: '- 小米手机 -',
options: [
{ src: '../../images/dizhi.png', id: '006', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '007', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '008', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '009', text: 'redmi8' }
],
id: 'a3'
},
{
title: '- redmi手机 -',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a4'
},
{
title: '- 黑鲨游戏 -',
options: [
{ src: '../../images/baoxiudan.png',id: '001',text: 'redmi8'},
{ src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' },
{ src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'},
{ src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'},
{ src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' }
],
id: 'a5'
},
{
title: '- 手机配件 -',
options: [
{ src: '../../images/duihuan.png', id: '006', text: 'redmi8' },
{ src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'},
{ src: '../../images/duihuan.png', id: '008', text: 'redmi8' },
{ src: '../../images/duihuan.png', id: '009',text: 'redmi8' }
],
id: 'a6'
},
{
title: '- 电视 -',
options: [
{ src: '../../images/dizhi.png', id: '006', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '007', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '008', text: 'redmi8' },
{ src: '../../images/dizhi.png', id: '009', text: 'redmi8' }
],
id: 'a7'
},
{
title: '- 电脑 8-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a8'
},
{
title: '- 电脑 9-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a9'
},
{
title: '- 电脑 10-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a10'
},
{
title: '- 电脑 11-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a11'
},
{
title: '- 电脑 12-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a12'
},
{
title: '- 电脑 13-',
options: [
{ src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
{ src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
],
id: 'a13'
},
],
},
//事件处理函数
onl oad: 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
// })
height += this.data.heightArr[this.data.heightArr.length-1]
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;
}
})
wxss
.container {
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.category-left {
height: 100%;
width: 22%;
box-sizing: border-box;
}
.catgegory-item {
width: 100%;
padding: 20rpx 0;
font-size: 26rpx;
text-align: center;
font-family: PingFang SC;
font-weight: 400;
line-height: 2;
color: #333333;
position: relative;
}
.lvtiao {
position: absolute;
width: 8rpx;
height: 28rpx;
background: #23C890;
opacity: 1;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.active-item {
background-color: #fff;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 2.1;
color: #212121;
}
.category-right {
flex: 1;
height: 100%;
}
.category-content {
display: grid;
grid-template-columns: repeat(auto-fill, 190rpx);
}
.category-title {
text-align: center;
width: 525rpx;
height: 67rpx;
line-height: 67rpx;
text-align: left;
margin-left: 14rpx;
border-bottom: 0.5rpx solid #BFBFBF;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
opacity: 1;
margin-top: 20rpx;
}
.content-item {
display: flex;
flex-direction: column;
padding: 20rpx;
text-align: center;
font-size: 30rpx;
}
.content-item image {
width: 150rpx;
height: 150rpx;
}
.content-item .mingiz {
height: 33rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
line-height: 24rpx;
color: #333333;
opacity: 1;
margin-top: 21rpx;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 轮播 */
.lunbo {
width: 486rpx;
height: 196rpx;
border: 1rpx solid #707070;
opacity: 1;
border-radius: 16rpx;
margin-left:32rpx;
margin-bottom:67rpx;
}
.lunbo .fuli_lunbo{
height:100%;
width:100%;
}
.lunbo .shu_tu{
height:100%;
width:100%;
}
这篇关于微信小程序左右联动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享11-22
-
怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享11-22
-
微信小程序二维码怎样解析成链接？-icode9专业技术文章分享11-22
-
微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享11-22
-
微信小程序的业务域名有什么作用-icode9专业技术文章分享11-22
-
微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享11-22
-
微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享11-22
-
微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享11-22
-
微信小程序全栈教程：从零开始的全攻略11-20
-
微信小程序全栈学习：从零开始的完整指南11-19
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
-
在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享11-13
-
微信小程序教程：零基础入门到实战11-01
栏目导航
