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


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 相关文章推荐
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
AngularJS手动表单验证
Feb 01 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python正则表达式使用范例分享
2016/12/04 Python
python 调用c语言函数的方法
2017/09/29 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python Matplotlib模块的使用
2020/09/16 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
高二美术教学反思
2014/01/14 职场文书
单位介绍信范文
2014/01/18 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
道歉信范文
2015/05/12 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python