本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下
效果图：
直接上代码：
wxml界面:
分类 /品牌 搜索商品 {{item.text1}} {{item.title}} {{item.text}} ¥{{item.money}} 已售{{item.sum}}
js界面：
// pages/class/class.js
Page({
data: {
classfiySelect: "",
leftText: [{
id: "01",
text1: "美妆专区",
},
{
id: "02",
text1: "面部清洁",
},
{
id: "03",
text1: "洗护专区",
},
{
id: "04",
text1: "面膜",
},
{
id: "05",
text1: "口红",
},
{
id: "06",
text1: "美妆专区",
},
{
id: "07",
text1: "面部清洁",
},
{
id: "08",
text1: "洗护专区",
},
{
id: "09",
text1: "面膜",
},
{
id: "010",
text1: "口红",
},
{
id: "011",
text1: "美妆专区",
},
{
id: "012",
text1: "面部清洁",
},
{
id: "013",
text1: "洗护专区",
},
{
id: "014",
text1: "面膜",
},
{
id: "015",
text1: "口红",
},
{
text1: "美妆专区",
},
{
text1: "面部清洁",
},
{
text1: "洗护专区",
},
{
text1: "面膜",
},
{
text1: "口红",
},
],
rightdata: [{
id: "01",
title: "美妆专区",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
id:1,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
id: 2,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
{
id: "02",
title: "面部清洁",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
{
id: "03",
title: "洗护专区",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
{
id: "04",
title: "面膜",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
{
id: "05",
title: "口红",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
{
id: "06",
title: "美妆专区",
frist: [{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
{
url: "/images/85309.jpg",
text: "卡姿兰补水套装",
money: 200,
sum: 20,
},
],
},
],
},
onLoad: function(options) {
this.setData({
classfiySelect: this.data.leftText[0].id
})
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function() {
},
//滚动触发
scroll: function(e) {
var scrollTop = e.detail.scrollTop,
h = 0,
classfiySelect;
var that = this;
that.data.leftText.forEach(function(clssfiy, i) {
var _h =26 + that.length(clssfiy['id'])*102;
if (scrollTop >= h){
classfiySelect = clssfiy['id'];
}
h +=_h;
console.log(h);
})
that.setData({
classfiySelect: classfiySelect,
})
},
//求每一栏高度
length: function(e) {
var that = this;
var rightData = that.data.rightData;
for (var i = 0; i < rightData.length; i++) {
if(rightData[i]['id']==e){
return rightData[i]['frist'].length;
}
}
},
//点击左边事件
left_list: function(e) {
var that = this;
var l_id = e.currentTarget.dataset.id;
that.setData({
rigId: l_id,
})
},
//跳转详情界面
particulars:function(e){
}
})
wxss界面：
.header{
display: flex;
background-color: rgba(219, 219, 221, 0.884);
align-items: center;
height: 60rpx;
}
.active{
color: red;
}
.header .headerClass{
color: red;
margin-left: 20rpx;
}
.header .headerClass,
.header .headerPin{
font-size: 28rpx;
}
.search{
display: flex;
height: 46rpx;
border-radius: 20rpx;
margin-left: 30rpx;
background-color:white;
width: 70%;
}
.search text{
color: gainsboro;
font-family: monospace;
font-size: 30rpx;
line-height: 46rpx;
}
.search image{
padding-left:50rpx;
width: 46rpx;
height: 46rpx;
}
.main{
display: flex;
}
.left{
width: 25%
}
.left view{
padding-top: 30rpx;
text-align: center;
}
.right{
width: 75%;
}
.listItem2{
display: flex;
}
.listItem .img{
width: 200rpx;
height: 200rpx;
text-align: center;
padding-top: 10rpx;
}
.listItem .img image{
width: 80%;
height: 80%
}
.itemTitle{
font-size: 32rpx;
padding-left: 20rpx;
padding-top: 10rpx;
color:gray;
}
.listItem .listText{
display: flex;
flex-direction: column;
margin-top: 6rpx;
}
.listItem .listText view{
display: flex;
align-items: flex-end;
}
.listItem .listText text{
font-size: 34rpx;
margin-top: 10rpx;
}
.listItem .listText .money{
color: red;
}
.listItem .listText view text{
font-size: 28rpx;
color :silver;
margin-right: 60rpx;
}
.listItem .listText view button{
background-color: red;
color: white;
padding-right: 8px;
padding-left: 8px;
padding-top: 0px;
}
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
}
::-webkit-scrollbar-track{
height: 20rpx;
color: black;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
