云诺说 - 小程序开发 - 软件定制
当前位置: 微信小程序 > 基于微信小程序的二手商城设计与开发系列之搜索功能

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

2021-02-02 03:45 分类:微信小程序 作者:云诺 阅读(231)

版权声明:本文为博主原创文章,如果转载请给出原文链接: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);
                }
            })

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

企业微信截图_20210202153823.png

好了,基于微信小程序的二手商城设计与开发系列之搜索功能就结束到这里,对代码有疑问或者需要做微信小程序的可以加我微信(LGY178888),请备注来意!

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 基于微信小程序的二手商城设计与开发系列之搜索功能

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:116 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:126 个
  • 评论总数:0 条
  • 访问总量: 185946次
  • 最近更新:2021年06月14日