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


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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php网站地图生成类示例
2014/01/13 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
理解javascript闭包
2015/12/15 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python修改字典内key对应值的方法
2015/07/11 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
学徒工职责
2014/03/06 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
毕业生自荐信范文
2015/03/05 职场文书
博士给导师的自荐信
2015/03/06 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python