• 1、創(chuàng)建自定義組件?my-search

新版HBuilder沒(méi)有了 component 文件夾，但是有 uni_modules 文件夾，用來(lái)創(chuàng)建組件：

1. 右鍵 uni_modules 文件夾，點(diǎn)擊 新建uni_modules創(chuàng)建
2. 在彈出框，填寫(xiě)組件名字，例如：my-search

• 2、使用該組件

運(yùn)行到微信開(kāi)發(fā)者工具查看：

?修改 my-search 組件的樣式：

<template><view class="my-search-container" :style="{'background-color': bgcolor}"><view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler"><uni-icons type="search" size="17"></uni-icons><text class="placeholder">搜索</text></view></view>
</template>
<script>export default {// 別人在使用該組件時(shí)可以，傳遞搜索框外部顏色，和圓角度props: {// 背景顏色bgcolor: {type: String,default: '#C00000'},// 圓角尺寸radius: {type: Number,// 單位是 pxdefault: 18}},data() {return {}},methods: {// 點(diǎn)擊了模擬的 input 輸入框searchBoxHandler() {// 觸發(fā)外界通過(guò) @click 綁定的 click 事件處理函數(shù)this.$emit('click')}}}
</script>
<style lang="scss">.my-search-container {// 移除背景顏色，改由 props 屬性控制// background-color: #C00000;height: 50px;padding: 0 10px;display: flex;align-items: center;}.my-search-box {height: 36px;background-color: #ffffff;// 移除圓角尺寸，改由 props 屬性控制// border-radius: 15px;width: 100%;display: flex;align-items: center;justify-content: center;.placeholder {font-size: 15px;margin-left: 5px;}}
</style>

某個(gè)用到 搜索框的頁(yè)面：

      // 點(diǎn)擊搜索跳轉(zhuǎn) 分包gotoSearch() {uni.navigateTo({url: '/subpkg/search/search'})},

?注意：我們上面搜索框，是給用戶看的，實(shí)際上，不能搜索，我們需要點(diǎn)擊跳轉(zhuǎn)到搜索頁(yè)面

• 3、新建分包 search 頁(yè)面

建立一個(gè)分包：【名稱為 search】

uniapp 配置小程序分包_打不著的大喇叭的博客-CSDN博客

• 4、使用已有的擴(kuò)展uni-search-bar組件

網(wǎng)址：uni-app官網(wǎng) (dcloud.net.cn)?

<template><view><view class="search-box"><!-- 使用 uni-ui 提供的搜索組件 --><uni-search-bar @input="input" placeholder="請(qǐng)輸入搜索內(nèi)容" clearButton="always" focus :radius="100"cancelButton="none"></uni-search-bar></view><!-- 搜索建議列表 --><view class="sugg-list" v-if="searchResults.length !== 0"><view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)"><view class="goods-name">{{item.goods_name}}</view><uni-icons type="arrowright" size="16"></uni-icons></view></view><!-- 搜索歷史 --><view class="history-box" v-else><!-- 標(biāo)題區(qū)域 --><view class="history-title"><text>搜索歷史</text><uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons></view><!-- 列表區(qū)域 --><view class="history-list"><uni-tag :text="item" v-for="(item, i) in historys" :key="i" :inverted="true"@click="gotoGoodsList(item)"></uni-tag></view></view></view>
</template><script>export default {data() {return {// 延時(shí)器的 timerIdtimer: null,// 搜索關(guān)鍵詞kw: '',// 搜索關(guān)鍵詞的歷史記錄historyList: ['a', 'app', 'apple'],// 搜索結(jié)果列表searchResults: []};},onLoad() {this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')},computed: {historys() {// 注意：由于數(shù)組是引用類型，所以不要直接基于原數(shù)組調(diào)用 reverse 方法，以免修改原數(shù)組中元素的順序// 而是應(yīng)該新建一個(gè)內(nèi)存無(wú)關(guān)的數(shù)組，再進(jìn)行 reverse 反轉(zhuǎn)return [...this.historyList].reverse()}},methods: {input(e) {// 清除 timer 對(duì)應(yīng)的延時(shí)器clearTimeout(this.timer)// 重新啟動(dòng)一個(gè)延時(shí)器，并把 timerId 賦值給 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒內(nèi)，沒(méi)有觸發(fā)新的輸入事件，則為搜索關(guān)鍵詞賦值this.kw = e// 根據(jù)關(guān)鍵詞，查詢搜索建議列表this.getSearchList()}, 500)},// 點(diǎn)擊列表跳轉(zhuǎn)到商品列表頁(yè)面gotoDetail(goods_id) {uni.navigateTo({// 指定詳情頁(yè)面的 URL 地址，并傳遞 goods_id 參數(shù)url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id})},// 點(diǎn)擊標(biāo)簽跳轉(zhuǎn)到商品列表頁(yè)面gotoGoodsList(kw) {uni.navigateTo({url: '/subpkg/goods_list/goods_list?query=' + kw})},// 保存搜索關(guān)鍵詞的方法saveSearchHistory() {// 1. 將 Array 數(shù)組轉(zhuǎn)化為 Set 對(duì)象const set = new Set(this.historyList)// 2. 調(diào)用 Set 對(duì)象的 delete 方法，移除對(duì)應(yīng)的元素set.delete(this.kw)// 3. 調(diào)用 Set 對(duì)象的 add 方法，向 Set 中添加元素set.add(this.kw)// 4. 將 Set 對(duì)象轉(zhuǎn)化為 Array 數(shù)組this.historyList = Array.from(set)// 調(diào)用 uni.setStorageSync(key, value) 將搜索歷史記錄持久化存儲(chǔ)到本地uni.setStorageSync('kw', JSON.stringify(this.historyList))},// 清空搜索歷史記錄cleanHistory() {// 清空 data 中保存的搜索歷史this.historyList = []// 清空本地存儲(chǔ)中記錄的搜索歷史uni.setStorageSync('kw', '[]')},// 根據(jù)搜索關(guān)鍵詞，搜索商品建議列表async getSearchList() {// 判斷關(guān)鍵詞是否為空if (this.kw === '') {this.searchResults = []return}// 發(fā)起請(qǐng)求，獲取搜索建議列表const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch', {query: this.kw})if (res.meta.status !== 200) return uni.$showMsg()this.searchResults = res.message// 查詢到搜索建議之后，調(diào)用 saveSearchHistory() 方法保存搜索關(guān)鍵詞this.saveSearchHistory()},}}
</script><style lang="scss">// 設(shè)置搜索框的背景顏色.uni-searchbar {background-color: #c00000;}// 設(shè)置為吸頂效果.search-box {position: sticky;top: 0;z-index: 999;}// 搜索列表.sugg-list {padding: 0 5px;.sugg-item {font-size: 12px;padding: 13px 0;border-bottom: 1px solid #efefef;display: flex;align-items: center;justify-content: space-between;.goods-name {// 文字不允許換行（單行文本）white-space: nowrap;// 溢出部分隱藏overflow: hidden;// 文本溢出后，使用 ... 代替text-overflow: ellipsis;margin-right: 3px;}}}// 搜索歷史.history-box {padding: 0 10px;.history-title {display: flex;justify-content: space-between;align-items: center;height: 40px;font-size: 13px;border-bottom: 1px solid #efefef;}.history-list {display: flex;flex-wrap: wrap;margin-top: 5px;.uni-tag {margin-top: 5px;margin-right: 5px;}}}
</style>