微信小程序常规商品展示, 左右联动demo（微信小程序商品详情）

微信小程序常规商品展示, 左右联动demo（微信小程序商品详情）

小程序商品菜单， 实现左右联动

简易餐饮系统根据不同需求，样式稍加更改即可直接使用

实现原理

设置scroll-view组件的scroll-top属性，scroll-into-view属性通过 wx.createSelectorQuery().select('类名').boundingClientRect().exec(res => {console.log(res)}); select选择第一个类目的盒子, 获取左侧菜单栏第一个菜单的高度通过 wx.createSelectorQuery().selectAll('.app-comp-menuList-item').boundingClientRect().exec(res => {console.log(res)}) selectAll会选择所要含有该类名的盒子, 获取右侧商品列表每个item的高度

滑动右侧，左侧高亮且滚动到可见区域

思路是：scroll-view 有监听事件bindscroll,我们在监听事件里监听右侧内容滚动的高度，进而判断当前是属于那一块区域。在bindscroll事件里我们可以直接得到scrollTop当前滚动的高度，但是我怎么判断这个高度输入第几类商品呢，这个就需要得到右侧每一类商品的高度，然而每一类商品的高度不是写死的，由数据渲染的，有的数据多一点，高度就多一点，通过小程序的另一个api wx.createSelectorQuery()获取

注意

右侧第一个商品开始设oneShow=true,当它执行一次的时候就赋值为false,所以在第一类商品高度区域内只执行一次，如果到达第二类以上，就让oneShow=true回来，这样回滚的时候它又能执行右侧第一个商品以后，设置初始值zindex=0;如果不等于当前i值就让它执行，然后让它=i;第二次及而二次以上就不再执行，当它=i+1时又执行一次，然后在这个阶段就不再执行，以此类推

效果图

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。