小程序-实现左右菜单联动功能

实现效果类似：

1.左边点击 -> 右边滚动的相应的分类

2.右边滑动 -> 左边的样式跟着改变

wxml

<view class="goodsList"><!-- 左边商品分类 --><scroll-view class="left" scroll-y scroll-top="{{scrollTops}}"><view wx:for="{{goodsList}}" class="goodsTitle {{tabCur==index?'active':''}}" wx:key="index" bindtap="gl" id="{{index}}">{{item.title}}</view></scroll-view><!-- 右边商品列表 --><scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink"><view wx:for="{{goodsList}}" class="goodsItem" id="scroll-{{idxs}}" wx:for-item="itemNames" wx:key="idxs" wx:for-index="idxs"><view>{{itemNames.title}}</view><block wx:for="{{itemNames.list}}" wx:for-item="itemName" wx:for-index="idx" wx:key="idx"><view class="listItem"><image src="{{itemName.img}}" class="img"></image><view class="name">{{itemName.name}}</view><view class="sell">{{itemName.sell}}</view><view class="price">{{itemName.price}}￥</view><image src="../../img/加号,收起,添加.svg" class="add"></image></view></block></view></scroll-view>
</view>

js

// pages/member/member.js
Page({/*** 页面的初始数据*/data: {tabCur: 0, //当前项rightCur: 0, // 用于实现左边联动右边goodsList: [{title: '碳酸类型',id: 1,list:[{name:'可口可乐',img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',sell: '月售：108',price: '4.8'},{name:'雪碧',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',sell: '月售：88',price: '4.8'},{name:'可口可乐',img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',sell: '月售：108',price: '4.8'},{name:'雪碧',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',sell: '月售：88',price: '4.8'},{name:'可口可乐',img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',sell: '月售：108',price: '4.8'},{name:'雪碧',img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',sell: '月售：88',price: '4.8'}]}, {title: '奶茶类型',id: 2,list:[{name:'阿萨姆奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'},{name:'香飘飘奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'},{name:'阿萨姆奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'},{name:'香飘飘奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'},{name:'阿萨姆奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'},{name:'香飘飘奶茶',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',sell: '月售：108',price: '4.8'}]},{title: '矿泉水',id: 3,list:[{name:'农夫山泉',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',sell: '月售：108',price: '4.8'},{name:'怡宝',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',sell: '月售：108',price: '4.8'},{name:'农夫山泉',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',sell: '月售：108',price: '4.8'},{name:'怡宝',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',sell: '月售：108',price: '4.8'},{name:'农夫山泉',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',sell: '月售：108',price: '4.8'},{name:'怡宝',img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',sell: '月售：108',price: '4.8'}]},]},gl(e) {this.setData({tabCur: e.currentTarget.id,rightCur: e.currentTarget.id,})},scrollLink(e) {let list = this.data.goodsListlet itemHeight = 0;for (let i = 0; i < list.length; i++) {//拿到每个元素let els = wx.createSelectorQuery().select("#scroll-" + i);els.fields({size: true}, function (res) {list[i].top = itemHeight;itemHeight += res.height;list[i].bottom = itemHeight}).exec()}// 拿到滚动的高度let scrollTop = e.detail.scrollTop;for (let i = 0; i < list.length; i++) {if (scrollTop > list[i].top && scrollTop < list[i].bottom) {this.setData({tabCur: i,})return false}}}
})

wxss文件

.goodsList{width: 100%;height: 100%;display: flex;
}
.left{float: left;width: 260rpx;background-color: #EEEEEE;height: 100vh;
}
.left .goodsTitle{line-height: 100rpx;text-align: center;
}
.active{background-color: #fff;
}
.right{height: 100vh;
}
.goodsItem{padding: 20rpx;
}
.goodsName{text-align: center;
}.listItem{position: relative;height: 180rpx;margin:  20rpx 0 ;border-radius: 20rpx;overflow: hidden;box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
}
.listItem .img{position: absolute;top: 0;left: 0;width: 180rpx;height: 180rpx;border-radius: 20rpx;
}
.listItem .add{position: absolute;right: 10rpx;bottom: 10rpx;width: 40rpx;height: 40rpx;
}
.listItem .name{position: absolute;top: 0;left: 190rpx;font-size: 36rpx;font-weight: 700;
}
.listItem .sell{position: absolute;top: 40%;left: 190rpx;color: #858687;font-size: 30rpx;
}
.listItem .price{position: absolute;bottom: 5rpx;left: 190rpx;color: #FF4A26;font-weight: 700;
}

参考资料

小程序-实现左右菜单联动功能相关推荐

微信小程序 - 实现左右菜单联动功能
今天给大家分享一下如何实现微信小程序左右菜单栏联动效果(相关代码模块我已单独整理放到github上面了,欢迎前来start),具体过程如下: 效果图: github地址:https://githu ...
小程序实现左右菜单联动（-）
效果 test.wxml 的文件 <view class="detail"><view class="content"><view ...
微信小程序左到右联动
今天说一下小程序经常遇到的联动案例,项目要求点左边右边的内容要对应的跳转,所以说当我们点击左侧边栏的时候要动态的把id传给右边的内容,使其对应,接下来就看看是怎么实现的吧.下节我会说一下右到左的联动, ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
关于奶茶店小程序开发价值和相关功能
相信对于很多人来说,奶茶都会占有一席之地.而喜欢奶茶的队伍还在不断扩大之中,这也引起了无数人的注意.但是真正运营了一家门店之后,才发现事情并没有想象中那么简单,不仅需要耗费大量的成本,而且在实际的运营 ...
微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下. 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...

小程序-实现左右菜单联动功能

wxml

js

wxss文件

小程序-实现左右菜单联动功能相关推荐

最新文章

热门文章