基于微信小程序的二手商城设计与开发系列之搜索功能

本文由我的个人博客云诺说转载，上次分享了基于微信小程序的二手商城设计与开发系列之首页功能的实现，今天来聊聊每个二手商城必备的搜索功能的实现吧，功能逻辑很简单，用户输入要搜索的关键词，点击确定。系统根据用户输入的关键词去数据库查询对应的商品再展示就可以了。

搜索框用普通的输入框就行，监听用户的操作事件

<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);
                }
            })

最后搜索二手商品结果展示图

今天就分享到这里，代码中有任何问题或者有疑问的都可以联系我，祝生活愉快！
往期案例视频展示
微信小程序序二手商城演示视频
点餐微信小程序演示视频
校园论坛微信小程序演示视频
基于微信小程序的校园助手_课表成绩查询小程序
劳务报价微信小程序_计算报价的微信小程序