微信小程序实现左右列表联动


Posted in Javascript onMay 19, 2020

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现左右列表联动

微信小程序实现左右列表联动

直接上代码:

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;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 #Javascript
微信小程序实现单选选项卡切换效果
Jun 19 #Javascript
一秒学会微信小程序制作table表格
Feb 14 #Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python实现简单遗传算法
2018/03/19 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
SQL Server笔试题
2012/01/10 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
房产销售经理职责
2013/12/20 职场文书
广告创意求职信
2014/03/17 职场文书
毕业自我鉴定书
2014/03/24 职场文书
工商局个人工作总结
2015/03/03 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年招生工作总结
2015/05/04 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL