微信小程序實現(xiàn)topBar底部選擇欄效果
本文實例為大家分享了微信小程序實現(xiàn)topBar底部選擇欄的具體代碼,供大家參考,具體內容如下
先看一下效果:底部分為三個頁面,點擊不同的選項就會跳轉到相對應的頁面去。
下面是文件夾的結構
這個分為三個頁面,分別是 index,dujia,Info
下面是代碼:
app.json
{ "pages": [//有幾個頁面,pages里面就要綁定幾個 "pages/dujia/dujia", "pages/index/index", "pages/info/info" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#DF3031", "navigationBarTitleText": "topBar練習", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#000000", "selectedColor": "#DF3031", "list": [ { "pagePath": "pages/index/index", "text": "第一頁", "iconPath": "images/1.png", "selectedIconPath": "images/1.png" }, { "pagePath": "pages/dujia/dujia", "text": "第二頁", "iconPath": "images/2.png", "selectedIconPath": "images/2.png" }, { "pagePath": "pages/info/info", "text": "第三頁", "iconPath": "images/3.jpg", "selectedIconPath": "images/3.jpg" } ] } }
其他的頁面都寫在對應文件夾的.wxml文件里面。.wxml文件就想當于我們網(wǎng)頁設計中的 html一樣。
例如我的index頁面:
<view> 第一頁 </view>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Bootstrap 填充Json數(shù)據(jù)的實例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細介紹了bootstrap3-dialog-master模態(tài)框的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript訪問本地文件夾的幾種實現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2024-06-06JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域
這篇文章主要介紹了JavaScript實現(xiàn)iframe自動高度調整和不同主域名跨域,作者通過建立一個代理來同步高度調整,需要的朋友可以參考下2016-02-02