微信小程序实现左右列表联动
程序员文章站
2023-12-09 20:52:51
本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下
效果图：
直接上代码：
wxml界面:
本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下
效果图：
直接上代码：
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。