微信小程序?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)上抓的一個特效...2007-05-05
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單網(wǎng)頁倒計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了js實現(xiàn)精美的圖片跟隨鼠標(biāo)效果,實例分析了javascript鼠標(biāo)事件及頁面樣式的操作技巧,需要的朋友可以參考下2015-05-05
JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)
除了getElementsByClassName()函數(shù),我們可以自己動手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下2016-05-05
盡管我使用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ù)緩存實例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請求、數(shù)據(jù)緩存的相關(guān)知識，本文通過實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
“眼睛跟隨鼠標(biāo)轉(zhuǎn)動效果”—— 265.com 把它放在網(wǎng)頁的LOGO里，用javascript來實現(xiàn)，這個創(chuàng)意不錯！ 以前剛做FLASH的時候，用AS1實現(xiàn)過，今天下班早，在家簡寫了個：2008-02-02