欢迎点击「算法与编程之美」↑关注我们!
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。
上一篇博客为大家简单的讲解了一下关于一个简单的电商小程序的首页和分类页面的制作。这篇博客呢,继续为大家讲解后面搜索页、详情页、购物车页面的制作。
搜索页
1.事实上在大多数的电商平台里,首页显示的搜索框不是真正的搜索框,而是你点击之后,会进入一个搜索页面(由另外一个页面上完成的)。
2.在搜索页面里面默认展示的搜索热词可以使用van-tag来显示,判断item.highlight属性,为true就高亮显示。
3.使用van-search组件搭建搜索, bind :change在函数里得到输入的值,set给value,onSearch事件里面带上value请求搜索接口http://www.xiongmaoyouxuan.com/api/search?word” + this.data.value
希望热词隐藏,搜索结果显示,使用van-card显示商品列表,使用wordsShow控制热词的显示 wx:if = “{ {wordsShow}}”。
4.点击热词,bind:tap= “onHotWordTap”,在时间里面获取热词文字,set给value,调用onSearch方法就可以完成搜索。
扩展&#