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


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之卸载鼠标事件的代码
May 14 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
ES5新增数组的实现方法
May 12 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注销代码(session注销)
2012/05/31 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python中的TCP socket写法示例
2018/05/11 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
爱国演讲稿500字
2014/05/04 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书