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

微信小程序实现菜单及子品牌联动

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

1、大分类下默认选中的品牌:
首先,定义一个class样式,用来标识被选中的品牌:

然后,给标签加上class:

发现可以改变文本颜色:

紧接着,在分类页面中定义一个brandActive状态,用来表示默认被选中品牌的下标:

回过头来,给品牌标签的class名brandActive加一个判断, 如果当前的js状态brandActive 恒等于当前html标签的下标 则该元素会绑定class:

页面默认效果:

2、大分类下默认选中品牌的商品列表:
首先,在classify.js中定义一个brandSonArr状态,用来存放分类下的商品列表:

其次,定义一个方法,用来请求接口并给brandSonArr请求回来的数据:

然后把brandSonArr传给商品列表brandSon组件:

brandSon组件接收:

将商品列表渲染出来:

默认显示为索引值为0的品牌列表:

3、切换大分类,联动切换品牌及商品列表:
给大类绑定一个change事件, 监听active(选中的大类下标)的改变:

默认选中大类下标:

绑定的onChange事件,当改变选中大类时:
A.将active的下标改为当前选中大类的下标,
B.通过getGoodsBrand(“大类名字”)获取商品列表.

Before:

After:

点击品牌进行切换:



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
WordPress版微信小程序2.1.8版发布发布时间:2022-07-18
下一篇:
小发包小程序系统开发分析发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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