搜索效果图
实现功能如下
(1) 未找到商品时显示提示信息，找到商品时显示商品列表
(2) 清空搜索框时显示搜索历史记录，历史记录可清除，点击历史记录赋值到搜索框
.wxml代码
<viewclass="top"><viewclass="topsearch"><viewclass="frame"><inputvalue="{{shoopingtext}}"bindinput="shoppinginput"></input></view><textbindtap="search">搜索</text></view></view><viewclass="history"wx:if="{{history}}"><viewclass="history_title"><text>历史搜索</text><imagesrc="/images/delete.png"mode="widthFix"style="width:5%;"bindtap="cleanhistory"></image></view><viewclass="history_text"><textwx:for="{{newArray}}"wx:key="key"data-text="{{item}}"bindtap="textfz">{{item}}</text></view></view><viewclass="none"wx:if="{{noneview}}"><imagesrc="/images/null.png"mode="widthFix"style="width:20%"></image><text>抱歉，没有相关商品</text></view><viewclass='swiper_con'wx:if="{{shoppinglist}}"><viewclass='swiper_con_view'wx:for="{{shoopingarray}}"wx:key="id"wx:if='{{item.status=="1"?true:false}}'><imagesrc="{{item.images}}"mode="widthFix"style="width:100%"data-status="{{item.status}}"></image><viewstyle="width:90%;margin:5%;"><textstyle="font-size:24rpx">{{item.title}}</text><viewclass="swiper_con_view_view"><viewstyle="width:80%;"><textstyle="font-size:24rpx;color:red;">￥{{item.money}}</text><textstyle="font-size:18rpx;color:#B8B8B8;margin-left:5%;">已售{{item.sold}}</text></view><imagesrc="/images/cart.png"mode="widthFix"style="width:10%;position:relative;left:8%;"></image></view></view></view></view>
.wxss代码
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: 20rpx; padding: 03%; } .frame>input { font-size: 24rpx; margin: 6rpx0; } .topsearch>text { width: 10%; margin-left: 5%; color: #a8a7a7fa; } .history { background-color: white; padding: 4%; } .history_title { font-size: 30rpx; display: flex; justify-content: space-between; color: #a8a7a7fa; 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: 40rpx; font-size: 30rpx; } .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: 530rpx; background-color: white; margin: 10rpx0; } .swiper_con_view:nth-child(even) { margin-left: 4%; } .swiper_con_view_view { margin-top: 5%; display: flex; align-items: center; }
.js代码
Page({ //清除历史记录cleanhistory: function(e) { this.setData({ history: false, //隐藏历史记录historyArray: [], //清空历史记录数组newArray: [], shoopingtext: ""//清空搜索框 }) }, //搜索search: function(e) { varsearchtext=this.data.shoopingtext; //搜索框的值varsss=true; if (searchtext!="") { //将搜索框的值赋给历史数组this.data.historyArray.push(searchtext); //模糊查询 循环查询数组中的title字段for (varindexinthis.data.shoopingarray) { varnum=this.data.shoopingarray[index].title.indexOf(searchtext); lettemp='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//隐藏商品列表 }); //所有商品列表的状态改为0for (varindexinthis.data.shoopingarray) { lettemp='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) 每次进入搜索页面历史记录为空，建议将搜索历史记录放入缓存中，下次进入搜索页面时显示搜索历史记录
End！
