微信小程式開發筆記2 自定義導航欄元件

2021-08-30 15:59:47 字數 1917 閱讀 6606

官方文件:

首先我們先看一下最終實現的效果:

這是乙個非常簡單的例子,就用這個例子敲開自定義元件的大門。如果你對vue的元件很熟的話,那麼你應該會輕鬆上手。

改組件應該具備最基本的屬性和方法:

這裡我還給頁籤切換時新增了slider的滑動動畫,為了更好的使用者體驗

元件 wxml
class

='tabbar-container'

>

class

='tabbar'

>

wx:for

="}"

wx:key

="ti+}"

>

"}" class

='tabbar-item'

style='}

'

bindtap

="clicktab"

>

class

="tabbar-title"

>

}view

>

view

>

block

>

class

='selected-slider'

style

="transform: translatex(

}px)

; -webkit-transform: translatex(

}px)

;background-color:}"

>

view

>

view

>

view

>

元件js
component(}

, data:

, methods:

)// 觸發父元件的tab-change方法,並將當前選中的tab作為引數傳遞給父元件

this

.triggerevent

('tab-change',)

}}})

元件的 wxss
.tabbar

.tabbar-item

.tabbar-title

.selected-slider

元件json
}

註冊元件

不要忘了在使用該元件的頁面或父元件的json檔案中註冊該元件:

"usingcomponents":
頁面/父元件 的wxml
class

='tab'

>

tab-items

="}"

actived-color

="green"

bind:tab-change

="ontabchange"

>

tabbar

>

view

>

class

='tab-content tab-}'

>

}view

>

頁面/父元件 的js
page(,

ontabchange

(e))}}

)

頁面/父元件 的wxss
.tab-content

.tab-0

.tab-1

.tab-2

如果對你有幫助,歡迎star。或者你發現bug也歡迎issue。

微信小程式自定義底部導航tabBar

custom tab bar資料夾要與pages檔案同級,custom tab bar之下的檔案名字為index 官方文件推薦用 fixed 在底部的 cover view cover image 元件渲染樣式,以保證 tabbar 層級相對較高。但是我是在真機除錯時遇到tabbar偶爾消失的bug...

微信小程式如何自定義底部導航

先看一下自定義底部導航 圖1 和未自定義的導航 圖2 效果差距 圖1 圖2如何實現自定義底部導航 建立乙個與pages同級的資料夾,名稱為custom tab bar資料夾名字是規定好的只能叫做這個。建立好這個資料夾之後就是編寫底部導航的內容 5.完成到上一步之後已經可以實現頁面的切換效果了,但是頁...

微信小程式開發筆記

元件開發 1 與vue 元件用法類似。a 建立元件 小程式中的元件與普通頁面目錄相同,例如需要建立乙個名為 component 的元件。首先建立乙個目錄為 component 的目錄,由 component.wxss component.wxml component.js component.jso...