官方文件:
首先我們先看一下最終實現的效果:
這是乙個非常簡單的例子,就用這個例子敲開自定義元件的大門。如果你對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
>
元件jscomponent(}
, data:
, methods:
)// 觸發父元件的tab-change方法,並將當前選中的tab作為引數傳遞給父元件
this
.triggerevent
('tab-change',)
}}})
元件的 wxss.tabbar
.tabbar-item
.tabbar-title
.selected-slider
元件json}
註冊元件
不要忘了在使用該元件的頁面或父元件的json檔案中註冊該元件:
"usingcomponents":
頁面/父元件 的wxmlclass
='tab'
>
tab-items
="}"
actived-color
="green"
bind:tab-change
="ontabchange"
>
tabbar
>
view
>
class
='tab-content tab-}'
>
}view
>
頁面/父元件 的jspage(,
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...