在商品页面上方点击筛选按钮,输入1400元的价格筛选区间,这样系统就会自动筛选符合价格要求的商品。
除价格外用户还可以筛选发货地、品牌等信息。
在微信小程序中,可以通过点击右上角的“三个点”图标来找到工具栏;在小程序的首页,可以点击底部的“我的”图标,然后点击右上角的“设置”图标来找到工具栏;
在小程序的首页,可以点击右上角的“+”图标,然后点击“工具”来找到工具栏。
多级联动菜单在许多的筛选场景应用十分广泛。
先看看效果图:
menu.wxml
menu.wxss
menu.jsp
menu.wxss
menu.js
menu.wxml
menu.wxss
menu.js
这里主要针对一个菜单栏进行详细讲解,其余两个原理相同。
游戏
menu.wxml
这里推荐大家使用 <scroll-view></scroll-view> 组件,这样超过限定的高度的话,就可以在内部产生滚动条,整体布局不会乱。使用 <scroll></scroll> 组件的时候,记得要开启滚动的方向(scroll-y表示纵向,scroll-x表示横向),这些属性默认是关闭的。
menu.wxss
注意:使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
menu.js
menu.js部分主要的难点就是wxml和js之间的数据交互,这里很容易弄晕,尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。
最后给大家提供该项目的github项目,直接抓下来就可以打开使用,只需对显示的数据进行修改即可。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)