微信小程序实现简单搜索功能
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了微信小程序实现简单搜索功能的具体代码,供大家参考,具体内容如下
搜索效果图
实现功能如下
(1) 未找到商品时显示提示信息,找到商品时显示商品列表
(2) 清空搜索框时显示搜索历史记录,历史记录可清除,点击历史记录赋值到搜索框
.wxml代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < view class = "top" > < view class = "topsearch" > < view class = "frame" > < input value = "{{shoopingtext}}" bindinput = "shoppinginput" ></ input > </ view > < text bindtap = "search" >搜索</ text > </ view > </ view > < view class = "history" wx:if = "{{history}}" > < view class = "history_title" > < text >历史搜索</ text > < image src = "/images/delete.png" mode = "widthFix" style = "width:5%;" bindtap = "cleanhistory" ></ image > </ view > < view class = "history_text" > < text wx:for = "{{newArray}}" wx:key = "key" data-text = "{{item}}" bindtap = "textfz" >{{item}}</ text > </ view > </ view > < view class = "none" wx:if = "{{noneview}}" > < image src = "/images/null.png" mode = "widthFix" style = "width:20%" ></ image > < text >抱歉,没有相关商品</ text > </ view > < view class = 'swiper_con' wx:if = "{{shoppinglist}}" > < view class = 'swiper_con_view' wx:for = "{{shoopingarray}}" wx:key = "id" wx:if = '{{item.status=="1"?true:false}}' > < image src = "{{item.images}}" mode = "widthFix" style = "width:100%" data-status = "{{item.status}}" ></ image > < view style = "width:90%;margin:5%;" > < text style = "font-size:24rpx" >{{item.title}}</ text > < view class = "swiper_con_view_view" > < view style = "width:80%;" > < text style = "font-size:24rpx;color:red;" >¥{{item.money}}</ text > < text style = "font-size:18rpx;color:#B8B8B8;margin-left:5%;" >已售{{item.sold}}</ text > </ view > < image src = "/images/cart.png" mode = "widthFix" style = "width:10%;position:relative;left:8%;" ></ image > </ view > </ view > </ view > </ view > |
.wxss代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | page{ background-color : white ; } . top { width : 100% ; background-color : #f7f7f7 ; } .topsearch { width : 90% ; margin-left : 5% ; display : flex; padding : 2% 0 ; align-items: center ; } .frame { background-color : white ; width : 75% ; border-radius: 20 rpx; padding : 0 3% ; } .frame>input { font-size : 24 rpx; margin : 6 rpx 0 ; } .topsearch>text { width : 10% ; margin-left : 5% ; color : #a8a7a7 fa; } .history { background-color : white ; padding : 4% ; } .history_title { font-size : 30 rpx; display : flex; justify- content : space-between; color : #a8a7a7 fa; align-items: center ; } .history_text { padding : 4% 0 ; display : flex; flex-wrap: wrap; } .history_text>text { background-color : #f7f7f7 ; padding : 1% 3% ; margin : 2% ; border-radius: 40 rpx; font-size : 30 rpx; } .history_text>text:first-child{ margin-left : 0 ; } . none { margin-top : 10% ; display : flex; align-items: center ; justify- content : center ; flex- direction : column; } .swiper_con { width : 96% ; margin-left : 2% ; display : flex; flex-wrap: wrap; } .swiper_con_view { width : 48% ; height : 530 rpx; background-color : white ; margin : 10 rpx 0 ; } .swiper_con_view:nth-child(even) { margin-left : 4% ; } .swiper_con_view_view { margin-top : 5% ; display : flex; align-items: center ; } |
.js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | Page({ //清除历史记录 cleanhistory: function (e) { this .setData({ history: false , //隐藏历史记录 historyArray: [], //清空历史记录数组 newArray: [], shoopingtext: "" //清空搜索框 }) }, //搜索 search: function (e) { var searchtext = this .data.shoopingtext; //搜索框的值 var sss = true ; if (searchtext != "" ) { //将搜索框的值赋给历史数组 this .data.historyArray.push(searchtext); //模糊查询 循环查询数组中的title字段 for ( var index in this .data.shoopingarray) { var num = this .data.shoopingarray[index].title.indexOf(searchtext); let temp = 'shoopingarray[' + index + '].status' ; if (num != -1) { //不匹配的不显示 this .setData({ [temp]: 1, }) sss = false //隐藏未找到提示 } } this .setData({ history: false , //隐藏历史记录 noneview: sss, //隐藏未找到提示 shoppinglist: true , //显示商品列表 newArray: this .data.historyArray //给新历史记录数组赋值 }) } else { this .setData({ noneview: true , //显示未找到提示 shoppinglist: false , //隐藏商品列表 history: false , //隐藏历史记录 }) } }, data: { shoopingtext: "" , //搜索框的值 history: false , //显示历史记录 noneview: false , //显示未找到提示 shoppinglist: false , //显示商品列表 historyArray: [], //历史记录数组, newArray: [], //添加历史记录数组 shoopingarray: [{ //商品 id: 0, images: "/images/3201.png" , title: "完达山甄选牧场酸奶饮品牛奶饮料常温发酵乳包..." , money: "88.00" , sold: "78箱" , status: 0 }, { id: 1, images: "/images/3202.jpg" , title: "网红 天日盐饼干 粗粮早餐 代餐宿舍小吃零食 130g*..." , money: "26.80" , sold: "34包" , status: 0 }] }, //搜索框的值 shoppinginput: function (e) { //当删除input的值为空时 if (e.detail.value == "" ) { this .setData({ history: true , //显示历史记录 shoppinglist: false //隐藏商品列表 }); //所有商品列表的状态改为0 for ( var index in this .data.shoopingarray) { let temp = 'shoopingarray[' + index + '].status' ; this .setData({ [temp]: 0, }) } } this .setData({ shoopingtext: e.detail.value }) }, //点击历史记录赋值给搜索框 textfz: function (e) { this .setData({ shoopingtext: e.target.dataset.text }) } }) |
tips:
(1) 本篇博客为显示效果,在搜索时通过修改商品列表中的status字段值来显示商品列表,建议在实际开发过程中传入搜索框内容到后台,后台查询后返回商品列表,以免占用过多资源。
(2) 每次进入搜索页面历史记录为空,建议将搜索历史记录放入缓存中,下次进入搜索页面时显示搜索历史记录。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
这是最近碰到的几个题目,简单地写一下我自己的方案,在此分享给大家,也希望能看到大家的方案2012-09-09
最新评论