




下載本文檔
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第關(guān)于微信小程序自定義tabbar問(wèn)題詳析目錄1、首先按照官方組件在app.json中定義tabbar2、在項(xiàng)目根目錄創(chuàng)建自定義tabbar組件3、組件內(nèi)容如下:4、在pages下的各個(gè)頁(yè)面組件引入tabbar總結(jié)
1、首先按照官方組件在app.json中定義tabbar
"tabBar":{
"custom":true,
"backgroundColor":"#FFFFFF",
"borderStyle":"white",
"list":[
"pagePath":"pages/index/index",
"text":"首頁(yè)",
"iconPath":"./images/home.png",
"selectedIconPath":"./images/home.png"
"pagePath":"pages/me/me",
"text":"個(gè)人中心",
"iconPath":"./images/me.png",
"selectedIconPath":"./images/me.png"
"usingComponents":{}
2、在項(xiàng)目根目錄創(chuàng)建自定義tabbar組件
劃重點(diǎn):根目錄,請(qǐng)看下圖,不放根目錄會(huì)導(dǎo)致this.getTabBar=null
3、組件內(nèi)容如下:
custom-tab-bar/index.js
Component({
data:{
selected:0,
color:"#7A7E83",
selectedColor:"#3cc51f",
list:[{
pagePath:"../../pages/index/index",
iconPath:"../images/home.png",
selectedIconPath:"../images/home.png",
text:"首頁(yè)"
},{
pagePath:"../../pages/me/me",
iconPath:"../images/me.png",
selectedIconPath:"../images/me.png",
text:"個(gè)人中心"
attached(){
methods:{
switchTab(e){
constdata=e.currentTarget.dataset
consturl=data.path
wx.switchTab({url})
this.setData({
selected:data.index
})
custom-tab-bar/index.json
{
"component":true
}
custom-tab-bar/index.wxml
cover-view
cover-view/cover-view
cover-viewwx:for="{{list}}"wx:key="index"data-path="{{item.pagePath}}"data-index="{{index}}"bindtap="switchTab"
cover-imagesrc="{{selected===indexitem.selectedIconPath:item.iconPath}}"/cover-image
cover-view{{item.text}}/cover-view
/cover-view
/cover-view
custom-tab-bar/index.wxss
.tab-bar{
position:fixed;
bottom:0;
left:0;
right:0;
height:48px;
background:white;
display:flex;
padding-bottom:env(safe-area-inset-bottom);
.tab-bar-border{
background-color:rgba(0,0,0,0.33);
position:absolute;
left:0;
top:0;
width:100%;
height:1px;
transform:scaleY(0.5);
.tab-bar-item{
flex:1;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
.tab-bar-itemcover-image{
width:27px;
height:27px;
.tab-bar-itemcover-view{
font-size:10px;
}
4、在pages下的各個(gè)頁(yè)面組件引入tabbar
以首頁(yè)舉例:
pages/index.json
{
"usingComponents":{
"custom-tab-bar":"../../custom-tab-bar/index"
}
pages/index.js
Page({
onShow:function(){
if(typeofthis.getTabBar==='function'this.getTabBar())
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 倉(cāng)儲(chǔ)主管崗位面試問(wèn)題及答案
- 病案管理員崗位面試問(wèn)題及答案
- 珠寶私人定制設(shè)計(jì)師崗位面試問(wèn)題及答案
- 2025屆浙江溫州十五校聯(lián)盟高二下化學(xué)期末質(zhì)量跟蹤監(jiān)視模擬試題含解析
- 廣東佛山市禪城區(qū)2025年化學(xué)高一下期末復(fù)習(xí)檢測(cè)模擬試題含解析
- 內(nèi)蒙古阿拉善2025年高二化學(xué)第二學(xué)期期末學(xué)業(yè)質(zhì)量監(jiān)測(cè)試題含解析
- 民航誠(chéng)信管理暫行辦法
- 協(xié)定稅率貨物管理辦法
- 廈門(mén)翔安垃圾管理辦法
- 我國(guó)非營(yíng)利組織公信力建設(shè)的現(xiàn)實(shí)問(wèn)題與改進(jìn)策略
- 夫妻婚內(nèi)財(cái)產(chǎn)約定協(xié)議書(shū)范本(2025年)
- 2025年中醫(yī)師承合同范本文字
- 0-3歲嬰幼兒感覺(jué)統(tǒng)合訓(xùn)練知到智慧樹(shù)章節(jié)測(cè)試課后答案2024年秋杭州師范大學(xué)
- 抑酸藥課件教學(xué)課件
- 2024譯林版七年級(jí)英語(yǔ)上冊(cè)單詞(帶音標(biāo))
- 北師大版數(shù)學(xué)六年級(jí)上學(xué)期期中試卷
- 新生兒重癥監(jiān)護(hù)室母乳使用專(zhuān)家共識(shí)(2024版)解讀
- 病毒性腦炎診療指南(兒科)
- 樂(lè)器設(shè)備供貨項(xiàng)目實(shí)施方案及售后服務(wù)方案
- 中共黨史知識(shí)競(jìng)賽試題及答案
- 2020年杭州學(xué)軍中學(xué)高一入學(xué)分班考試英語(yǔ)試卷及答案
評(píng)論
0/150
提交評(píng)論