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