微信小程序点击分类跳到对应商品,滚动商品,对应详情选中
首先我们先展示怎么分类选中的写法
文章图片
文章图片
动态绑定navActive的值,来决定哪个分类被选中,选中类则为active,否则为空,将选中样式写到active里。
然后为点左边右边跳到相应商品,这里主要用到的锚点,小程序在scroll-view里提供了一个scroll-into-view
文章图片
index.wxml
左边分类部分
文章图片
右边商品部分
文章图片
文章图片
这时点击左边右边就可以滚动到相应的商品啦,现在我们接着做右边滚动,左边对应分类选中。
尤其此次是在实际项目中做的,有些数字的写法也是通过项目的数字写的,所以早写代码的时候一定要考虑要不要,去理解思路,不可硬搬
这里的绑定的高度是scroll-view的高度,因为我这里有一个50px的head,所以才减50,请根据实际情况决定写法
文章图片
获得每个元素据顶部的高度,组成一个数组,通过高度与scrollTop的对比来知道目前滑动到那个区域,里面的34,90也视实际情况定
文章图片
因为是通过实时监控来判断的,如果判断完了以后就绑定数据的话,就会不停的setData,所以我这里设置了一个lastActive,只有每次被选中分类变的时候,才会setData
文章图片
【微信小程序点击分类跳到对应商品,滚动商品,对应详情选中】
推荐阅读
- 一个小故事,我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗()