微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)topBar底部選擇欄的具體代碼,供大家參考,具體內(nèi)容如下
先看一下效果:底部分為三個(gè)頁面,點(diǎn)擊不同的選項(xiàng)就會(huì)跳轉(zhuǎn)到相對應(yīng)的頁面去。
下面是文件夾的結(jié)構(gòu)
這個(gè)分為三個(gè)頁面,分別是 index,dujia,Info
下面是代碼:
app.json
{ "pages": [//有幾個(gè)頁面,pages里面就要綁定幾個(gè) "pages/dujia/dujia", "pages/index/index", "pages/info/info" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#DF3031", "navigationBarTitleText": "topBar練習(xí)", "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" } ] } }
其他的頁面都寫在對應(yīng)文件夾的.wxml文件里面。.wxml文件就想當(dāng)于我們網(wǎng)頁設(shè)計(jì)中的 html一樣。
例如我的index頁面:
<view> 第一頁 </view>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01bootstrap3-dialog-master模態(tài)框使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap3-dialog-master模態(tài)框的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript訪問本地文件夾的幾種實(shí)現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06JavaScript實(shí)現(xiàn)iframe自動(dòng)高度調(diào)整和不同主域名跨域
這篇文章主要介紹了JavaScript實(shí)現(xiàn)iframe自動(dòng)高度調(diào)整和不同主域名跨域,作者通過建立一個(gè)代理來同步高度調(diào)整,需要的朋友可以參考下2016-02-02基于layui內(nèi)置模塊(element常用元素的操作)
今天小編就為大家分享一篇基于layui內(nèi)置模塊(element常用元素的操作),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript打開新窗口同時(shí)關(guān)閉舊窗口
因業(yè)務(wù)需要,在網(wǎng)上查找這個(gè)問題的解決辦法,但是昏天黑地地搞了半天,找到的方法雖然可以實(shí)現(xiàn)功能,但是總是會(huì)跳出討厭的“關(guān)閉窗口”的提示框,郁悶。2009-01-01微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08