快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)底部導(dǎo)航

更新時間：2018年11月05日 14:14:18 作者：w10322331

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部導(dǎo)航，具有一定的參考價值，感興趣的小伙伴們可以參考一下

之前我的做微信小程序的時候，需要一個底部導(dǎo)航樣式，但是我搜索的時候，大部分都是寫的一些小程序自定義的tabBar的樣式，而當(dāng)時我在網(wǎng)上有一個地方找到了這個模板，現(xiàn)在介紹給大家參考。

WXML代碼：

<import src="../../template/nav" />
 <view class="flex fix_nav_wp">
 <block wx:for="{{navData}}">
   <template is="nav" data="{{...item}}"/>
</block>
</view>

JS代碼：

Page({
 data: {
  navData: [
   {
    name: "購物車", //文本
    current: 1,  //是否是當(dāng)前頁，0不是 1是
    style: 0,   //樣式
    ico: 'icon-qiugouguanli', //不同圖標(biāo)
    fn: 'gotoCompanyIndex'  //對應(yīng)處理函數(shù)
   }, {
    name: "我的名片",
    current: 0,
    style: 0,
    ico: 'icon-mingpianjia',
    fn: 'gotobusinessCard'
   }, {
    name: "發(fā)布中心",
    current: 0,
    style: 1,
    ico: '',
    fn: 'gotopublish'
   }, {
    name: "消息中心",
    current: 0,
    style: 0,
    ico: 'icon-yikeappshouyetubiao35',
    fn: 'gotoMessages'
   }, {
    name: "個人中心",
    current: 0,
    style: 0,
    ico: 'icon-wode',
    fn: 'bindViewMy'
   },
  ],
 
 },
 
})

WXSS代碼：

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

網(wǎng)上抓的一個特效
網(wǎng)上抓的一個特效...
2007-05-05
微信小程序日歷插件代碼實(shí)例
這篇文章主要介紹了微信小程序日歷插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12
JS實(shí)現(xiàn)簡單網(wǎng)頁倒計時器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單網(wǎng)頁倒計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精美的圖片跟隨鼠標(biāo)效果,實(shí)例分析了javascript鼠標(biāo)事件及頁面樣式的操作技巧,需要的朋友可以參考下
2015-05-05
JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)
除了getElementsByClassName()函數(shù),我們可以自己動手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下
2016-05-05
JavaScript編程的10個實(shí)用小技巧
盡管我使用Javascript來做開發(fā)有很多年了，但它常有一些讓我很驚訝的小特性。對于我來說，Javascript是需要持續(xù)不斷的學(xué)習(xí)的。
2014-04-04
使用JS操作文件(FileReader讀取--node的fs)
這篇文章主要介紹了使用JS操作文件(FileReader讀取--node的fs)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-12-12
uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計時
這篇文章主要為大家詳細(xì)介紹了uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
uni-app網(wǎng)絡(luò)請求、數(shù)據(jù)緩存實(shí)例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請求、數(shù)據(jù)緩存的相關(guān)知識，本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-11-11
javascript簡寫效果“神秘的眼睛”
“眼睛跟隨鼠標(biāo)轉(zhuǎn)動效果”—— 265.com 把它放在網(wǎng)頁的LOGO里，用javascript來實(shí)現(xiàn)，這個創(chuàng)意不錯！以前剛做FLASH的時候，用AS1實(shí)現(xiàn)過，今天下班早，在家簡寫了個：
2008-02-02