• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序点击分类跳到对应商品,滚动商品,对应详情选中 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

首先我们先展示怎么分类选中的写法

动态绑定navActive的值,来决定哪个分类被选中,选中类则为active,否则为空,将选中样式写到active里。

然后为点左边右边跳到相应商品,这里主要用到的锚点,小程序在scroll-view里提供了一个scroll-into-view 

 index.wxml

左边分类部分

右边商品部分

这时点击左边右边就可以滚动到相应的商品啦,现在我们接着做右边滚动,左边对应分类选中。

尤其此次是在实际项目中做的,有些数字的写法也是通过项目的数字写的,所以早写代码的时候一定要考虑要不要,去理解思路,不可硬搬

这里的绑定的高度是scroll-view的高度,因为我这里有一个50px的head,所以才减50,请根据实际情况决定写法

获得每个元素据顶部的高度,组成一个数组,通过高度与scrollTop的对比来知道目前滑动到那个区域,里面的34,90也视实际情况定

因为是通过实时监控来判断的,如果判断完了以后就绑定数据的话,就会不停的setData,所以我这里设置了一个lastActive,只有每次被选中分类变的时候,才会setData

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap