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

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

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

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

最后搜索二手商品结果展示图
在这里插入图片描述
今天就分享到这里,代码中有任何问题或者有疑问的都可以联系我,祝生活愉快!
往期案例视频展示
微信小程序序二手商城演示视频
点餐微信小程序演示视频
校园论坛微信小程序演示视频
基于微信小程序的校园助手_课表成绩查询小程序
劳务报价微信小程序_计算报价的微信小程序

  • 1
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

AissenMe

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值