微信小程式雲開發6
-
搜尋功能,歷史記錄,以及搜尋結果連結
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); } } })
相關文章
- 微信小程式學習:雲開發微信小程式
- 微信小程式---快速上手雲開發微信小程式
- 微信小程式雲開發如何上手微信小程式
- 微信小程式--聊天室小程式(雲開發)微信小程式
- 微信小程式雲開發:目標管理微信小程式
- 雲原生微信小程式開發實戰微信小程式
- 微信小程式開發微信小程式
- 基於後端雲微信小程式開發後端微信小程式
- 微信小程式開發小記微信小程式
- 微信小程式開發2微信小程式
- 微信小程式開發教程微信小程式
- 【小程式】微信小程式開發準備微信小程式
- 微信小遊戲開發(6)-Adapter遊戲開發APT
- 使用mpvue開發微信小程式Vue微信小程式
- 微信小程式開發--『狗蛋TV』微信小程式
- 開發微信小程式的作用微信小程式
- 微信小程式開發神器-Grace微信小程式
- 微信小程式開發精講微信小程式
- 微信小程式藍芽開發微信小程式藍芽
- 微信小程式開發總結微信小程式
- 微信小程式開發之大神之路最全微信小程式開發教程(視訊+精品文章)微信小程式
- 【微信小程式開發】梔子手作花花微信小程式商城開發最佳實踐微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式開發系列教程三:微信小程式的除錯方法微信小程式除錯
- 微信小程式開發系列二:微信小程式的檢視設計微信小程式
- 微信小程式開發風口下,微信小程式該如何運營?微信小程式
- 微信小程式--簡約風部落格小程式(基於雲開發 - 全開源)微信小程式
- 微信小程式開發(持續更新)微信小程式
- 微信小程式開發注意事項微信小程式
- 微信小程式開發初體驗微信小程式
- 快速學會開發微信小程式微信小程式
- 原生微信小程式開發記錄微信小程式
- 微信小程式開發常用功能微信小程式
- java-微信小程式開發工具Java微信小程式
- 微信小程式 #雲開發 #雲端儲存 #雲資料庫 #雲函式微信小程式資料庫函式
- 微信小程式雲開發 -- 一個人註冊到上線微信小程式
- 微信小程式開發平臺新功能「雲開發」快速上手體驗微信小程式
- 微信小程式開發系列(一) :開發環境搭建和微信小程式的檢視設計與開發微信小程式開發環境