當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【小程序项目开发--京东商城】uni-app之自定义搜索组件（上）-- 组件UI

發布時間：2023/12/8 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了【小程序项目开发--京东商城】uni-app之自定义搜索组件（上）-- 组件UI 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🤵?♂? 個人主頁: @計算機魔術師
👨?💻 作者簡介：CSDN內容合伙人，全棧領域優質創作者。

🌐 推薦一款找工作神器網站: 點擊跳轉牛客網 |筆試題庫|面試經驗|實習招聘內推|

還沒有賬戶的小伙伴速速點擊鏈接登錄注冊把！🎉🎉

該文章收錄專欄
? 2022微信小程序京東商城實戰 ?

文章目錄

一、介紹并創建search分支（選讀*）
二、自定義搜索組件UI結構
- 2.1在`component`目錄上創建組件
- 2.2 定義自定義組件的UI結構
- 2.3 解決一個小bug
三、封裝自定義組件屬性和click事件
- 3.1 自定義屬性
- 3.2 click 事件綁定
四、導航跳轉和吸頂效果
- 4.1 導航跳轉
- 4.2 吸頂效果
個人總結（選讀*）

一、介紹并創建search分支（選讀*）

git checkout -b search 注釋：創建分支并跳轉

二、自定義搜索組件UI結構

2.1在component目錄上創建組件

2.2 定義自定義組件的UI結構

對于搜索圖標，uni官方給我們了相應的組件

這些官方組件都放在了文件uni_modules目錄下了，直接使用即可

模板

樣式

效果：

2.3 解決一個小bug

在滑動三級分類時，會發現顯示的不完整，且此時搜索框是會可以被滑動，這是因為我們在scroll-view滑動組件中設置的高度是手機可用的高度，而此時搜索框組件占用了一部分高度，對應的，底部也會減少一部分高度，所以我們在設置其滑動組件高度時可以減去搜索框對應使用高度

各個高度如下

修改如下（減去50px)：

onLoad() {// 調取手機高度數據const {windowHeight: Hight} = uni.getSystemInfoSync()this.windowHeight = Hight - 50 // 減去搜索框高度// 調取分類數據this.getCateList() },

成功解決

三、封裝自定義組件屬性和click事件

3.1 自定義屬性

通過自定義屬性增強組件的通用性（自定義背景顏色，圓角程度）

在props節點定義數據(類似在原生小程序中的properties屬性，
props是父組件與組件之間的通信，而data則是組件的私有數據，無法直接傳參）
默認值為default屬性

props: {// 背景顏色bgcolor: {type: String,default: '#ff1e0a'},// 圓角尺寸radius: {type: Number,default: 100}},

在組件中動態綁定style，輸入鍵值對

<view class="search-container" :style="{'background-color': bgcolor}"><view class="search-box" :style="{'broder-radius': radius + 'rpx'}">

那么在使用該組件時，我們可以對其傳參，設置背景顏色和圓角度，如
（注意：在組件傳參中，參數由雙引號包裹起來·"" 如果參數字符串，那么字符串形式應該為 '字符串',不然報錯會難以查找

<my-search v-bind:bgcolor="'pink'" v-bind:radius="10"></my-search>

效果：

3.2 click 事件綁定

實現點擊該組件實現頁面跳轉到搜索頁面，按照我們以往的思路我們自然而然地想為該組件綁定一個處理函數，那么該方法可不可行呢？

我們綁定一個事件處理函數，并在事件觸發后打印ok：

<my-search v-on:click="gotosearch"></my-search>// 搜索框click事件gotosearch: () => {console.log('ok')},

可以看到毫無效果：

原因：

當前為自定義組件綁定了 click事件處理函數,但是自定義組件本身并沒有提供click事件，所以綁定無效，
那么為什么在常規組件中，如 view 可以呢，這是因為官方已經為這些常規組件封裝好了 click事件，所以可以直接綁，而自定義組件并沒有封裝，所以即使綁定了也無法實現

解決

在自定義組件中，我們可以為最外層組件容器 view 綁定一個click事件（原理：使用官方組件封裝的click點擊事件判斷觸發）

并在該事件綁定函數中使用this.$emit調用父組件綁定函數

<view class="search-container" :style="{'background-color': bgcolor}" v-on:click="searchBoxHander">······</view>// 搜索框click事件searchBoxHander() {console.log('~~~~~')this.$emit('click')},

四、導航跳轉和吸頂效果

4.1 導航跳轉

創建搜索（search) 頁面（在分包中創建）
在組件綁定函數gotosearch 跳轉到編程時跳轉頁面

// 搜索框click事件gotosearch(){uni.navigateTo({url: '/subpackages/search/search'})},

效果：

4.2 吸頂效果

吸頂效果：保持頂部，不隨滑動消失而消失

在分類頁面由于整個 UI結構高度并沒有超出頁面(滑動高度 + 搜索框高度 = 可用高度)，所以不需要配置吸頂效果，這里配置首頁

首頁配置

UI結構

<view class="search-box"><my-search v-on:"gotosearch"></my-search></view>

跳轉頁面時間處理函數

// 跳轉到自定義導航頁面gotosearch(){uni.navigateTo({url:'/subpackages/search/search'})

通過樣式實現吸頂效果(重要）

.search-box {position: sticky; // sticky 粘性的// 保持頂部top: 0;// 提高層級，避免被輪播圖覆蓋z-index: 999;}

效果：

個人總結（選讀*）

一下只是個人的學習總結拙見，寫得不好還請海涵。
由于我是半路出家，只學了一點html，css, 就直接學原生小程序，再到uni-app，所以基礎不好，在面對原生小程序中遇到 bindtap,bindchange，這些事件處理函數有點懵，下意識當作一種函數，但實際上直接再組件中使用是官方封裝好的，原本模樣應該是 bind:tap = “函數名”，這里的bind 是綁定事件的意思，而事件則是 tap（自定義名字），在官方組件內部已經封裝好了事件，所以在后面學 父組件與子組件通信時候，我還在納悶， bind: sync = ”函數名字“，為啥說是自定義事件 bind:sync,且在子組件內使用 this.triggerEvent(觸發事件）,就是觸發該組件的事件sync（且可以傳參），在uni-app則是以this.emit觸發事件。例如click，在官方組件應該是判斷是否點擊如果點擊則調用’this.$emit’觸發事件函數。

綜上要實現對自定義組件綁定click事件，可在自定義組件結構中最外層容器綁定click事件，使用官方封裝好的事件處理，然后在click事件所綁定函數中this.$emit調用父組件調用函數

?謝謝你的閱讀，您的點贊和收藏就是我創造的最大動力！?

總結

以上是生活随笔為你收集整理的【小程序项目开发--京东商城】uni-app之自定义搜索组件（上）-- 组件UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。