版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156243.html
上次分享了基于微信小程序的二手商城设计与开发系列之首页功能的实现，今天来聊聊每个二手商城必备的搜索功能的实现吧，功能逻辑很简单，用户输入要搜索的关键词，点击确定。系统根据用户输入的关键词去数据库查询对应的商品再展示就可以了。
搜索框用普通的输入框就行，监听用户的操作事件
<van-search
value="{{ searchKey }}"
input-align="center"
bind:search="toSearchList"
shape="round"
placeholder="请输入要搜索的商品"
/>用户点击搜索就会触发toSearchList事件。
toSearchList(e){
var searchKey = e.detail.replace(/\s*/g, '');
if(searchKey){
wx.navigateTo({
url: `../classifyList/classifyList?from=search&txt=${searchKey}`
})
}
},搜索结果展示页
<view class="like_goods_list">
<view bindtap="tapToDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{index}}" wx:for="{{goods_list}}">
<image
src="{{item.userDetail.avatarUrl}}"
class="userinfo-avatar mini-avatar"
/>
<view class="item_right">
<view class="nickName">
<text>{{item.userDetail.nickName}}</text>
</view>
<view class="item_title">
<text>{{item.title}}</text>
</view>
<view class="price">
<text class="tag">￥</text><text>{{item.price}}</text>
</view>
<view class="pic_box">
<image
wx:for="{{item.pic_url}}"
wx:for-item="img"
wx:for-index="idx"
wx:key="{{index}}-{{idx}}"
src="{{img}}"
class="goods_pic"
/>
</view>
<view class="txt_box">
<view class="g_type">
<text>#{{item.g_type}}</text>
<van-tag wx:if="{{item.isNew}}" plain type="success">全新宝贝</van-tag>
</view>
<text class="pub_time">{{item.pub_time}} | {{item.likeNum}}人喜欢</text>
</view>
</view>
</view>
<view class="no-likes" wx:if="{{noData}}">
<text class="empty">暂无数据~</text>
</view>
</view>根据关键词查询数据库里的商品信息并返回
wx.cloud.callFunction({
name: 'getClassifyList',
data: {
value: str,
from
},
success: res => {
wx.hideLoading();
if(res.result.length){
that.setData({
goods_list: res.result
})
}else{
that.setData({
noData: true
})
}
console.log(res);
},
fail: err => {
wx.hideLoading();
console.log(err);
}
})最后搜索二手商品结果展示图
好了，基于微信小程序的二手商城设计与开发系列之搜索功能就结束到这里，对代码有疑问或者需要做微信小程序的可以加我微信（LGY178888），请备注来意！
共有 0 条评论 - 基于微信小程序的二手商城设计与开发系列之搜索功能