微信小程序实现左右列表联动
作者：supertianjia
这篇文章主要为大家详细介绍了微信小程序实现左右列表联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下
效果图：
直接上代码：
wxml界面:
<view class='header'>
<text class='headerClass'>分类</text>
<text class='headerPin'>/品牌</text>
<view class="search">
<image src='/images/搜索.png'></image>
<text>搜索商品</text>
</view>
</view>
<view class='main'>
<view class='left'>
<scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true">
<block wx:for="{{leftText}}" wx:for-list="item">
<view class="{{classfiySelect == item.id?'active':''}}" data-id='{{item.id}}' bindtap='left_list'>
<text>{{item.text1}}</text>
</view>
</block>
</scroll-view>
</view>
<view class='right'>
<scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">
<block wx:for="{{rightData}}" wx:for-list="item">
<view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view>
<view bindtap='particulars' class='listItem' data-id='{{item.id}}'>
<block wx:for="{{item.frist}}">
<view class='listItem2' data-text="{{}}">
<view class='img'>
<image src='{{item.url}}'></image>
</view>
<view class='listText'>
<text>{{item.text}}</text>
<text class='money'>¥{{item.money}}</text>
<view>
<text>已售{{item.sum}}</text>
<button size='mini' bindtap='particulars'>立即抢购</button>
</view>
</view>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
</view>
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;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。