-
搜索功能,历史记录,以及搜索结果链接
search.wxml
<!--components/search/search.wxml--> <view class="{{ isFocus ? 'containerFocus' : 'container' }}"> <view class="search"> <view class="search-text"> <text class="iconfont iconsousuo1"></text> <input type="text" placeholder="搜索喵星人" bindfocus="handleFocus" bindconfirm="handleConfirm" confirm-type="search" /> </view> <view wx:if="{{ isFocus }}" class="search-cancel" bindtap="handleCancel">取消</view> </view> <view class="search-history"> <text>历史记录</text> <text bindtap="handleHistoryDelete" class="iconfont iconshanchu"></text> </view> <view class="search-history-btn"> <text bindtap="handleHistoryItemDel" data-text="{{ item }}" wx:for="{{ historyList }}" wx:key="{{ index }}">{{ item }}</text> </view> <navigator wx:for="{{ searchList }}" wx:key="{{ index }}" url="{{ '/pages/detail/detail?userId=' + item._id }}" open-type="navigate"> <view class="searchList-item"> <view> <image src="{{ item.userPhoto }}" /> <text>{{ item.nickName }}</text> </view> <text class="iconfont iconarrowRight"></text> </view> </navigator> </view>
search.wxss
/* components/search/search.wxss */ .container{ position: fixed; left:0; top:0; width:100%; height:90rpx; z-index: 9999; overflow: hidden;} .containerFocus{ position: fixed; left:0; top:0; width:100%; height:100%; z-index: 9999; background:#ccc;} .search{ display: flex; align-items: center; margin:20rpx;} .search-text{ display: flex; align-items: center; flex:1; border:1px #b4b5b6 solid; border-radius: 10rpx; height:60rpx; background: white;} .search-text .iconsousuo1{ margin:0 10rpx;} .search-text input{ flex:1;} .search-cancel{ margin:0 10rpx; } .search-history{ display: flex; justify-content: space-between; margin:20rpx; margin-bottom: 30rpx;} .search-history-btn{ margin-bottom: 30rpx;} .search-history-btn text{ border:1px #b4b5b6 solid; padding:10rpx 20rpx; background:white; border-radius: 20rpx; margin:10rpx;} .searchList-item{ height:120rpx; border-bottom: 1px #b4b5b6 dashed; padding:10rpx; display: flex; align-items: center; justify-content: space-between;} .searchList-item view{ display: flex; align-items: center;} .searchList-item image{ width:100rpx; height:100rpx; border-radius: 50%;}
search.js
// components/search/search.js const app = getApp() const db = wx.cloud.database() Component({ /** * 组件的属性列表 */ options: { styleIsolation: 'apply-shared' }, properties: { }, /** * 组件的初始数据 */ data: { isFocus : false, historyList : [], searchList : [] }, /** * 组件的方法列表 */ methods: { handleFocus(){ wx.getStorage({ key: "searchHistory", success: (res)=> { this.setData({ historyList : res.data }); } }) this.setData({ isFocus : true }); }, handleCancel(){ this.setData({ isFocus: false }); }, handleConfirm(ev){ let value = ev.detail.value; let cloneHistoryList = [...this.data.historyList]; cloneHistoryList.unshift(value); wx.setStorage({ key: "searchHistory", data: [...new Set(cloneHistoryList)] }); this.changeSearchList(value); }, handleHistoryDelete(){ wx.removeStorage({ key: 'searchHistory', success:(res)=>{ this.setData({ historyList : [] }); } }) }, changeSearchList(value){ db.collection('users').where({ nickName: db.RegExp({ regexp: value, options: 'i' }) }).field({ userPhoto : true, nickName : true }).get().then((res)=>{ this.setData({ searchList : res.data }); }); }, handleHistoryItemDel(ev){ let value = ev.target.dataset.text; this.changeSearchList(value); } } })
微信小程序云开发6
最新推荐文章于 2024-08-15 18:19:19 发布