微信小程序实现左右列表联动
更新时间：2020年05月19日 10:57:40 作者：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;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例，非常的实用，特别是在BS架构的企业级应用，有需要的小伙伴可以参考下。2015-04-04
下面小编就为大家分享一篇js删除数组中的元素delete和splice的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
JavaScript 中实现 use strict的方法及优势
本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下2023-09-09
本文给大家分享的是如何解决获取JavaScript异步函数返回值的经历及最后的解决方法，有需要的小伙伴可以参考下2016-12-12
这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天，我们配置过一份 webpack 配置，直接复制过来使用，这里就不多说了，然后就是在项目中引入我们的 less，需要的朋友可以参考下2022-11-11
本文为大家详细介绍下使用js如何监听键盘事件，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-07-07
这篇文章主要介绍了JavaScript 删除小数点后的数字实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Web打印解决方案之证件套打的实现思路的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下2021-08-08
这篇文章给大家总结下JS实现数组去重方法(六种方法)，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2017-07-07
最新评论