微信小程序?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)文章
本文主要介紹了JS 異步遍歷的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JavaScript實現(xiàn)定時任務(wù)隊列的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)一個基于一定時間間隔連續(xù)執(zhí)行任務(wù)隊列的功能,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考下2023-11-11
本文是小編日常讀書筆記整理有關(guān)javascript知識，都是js精粹非常不錯，具有參考借鑒價值，特此分享到腳本之家平臺供大家參考2016-06-06
用js+cookie記錄滾動條位置...2007-01-01
這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)動態(tài)時間顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文給大家分享的是使用原生的javascript實現(xiàn)的響應(yīng)式的瀑布流布局的方法和源碼，非常的實用，有需要的小伙伴可以參考下。2015-04-04
Javascript:為input設(shè)置readOnly屬性(示例講解)
本篇文章主要是對Javascript中為input設(shè)置readOnly屬性的示例代碼進(jìn)行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了SublimeText自帶格式化代碼功能之reindent的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了原生JS封裝拖動驗證滑塊的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Three.js中如何使用CSS3DRenderer和CSS3DSprite實現(xiàn)模型標(biāo)簽文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以輕松地實現(xiàn)模型標(biāo)簽文字的效果,為場景中的模型提供更直觀的信息展示,本文將介紹如何使用這兩個工具來實現(xiàn)模型標(biāo)簽文字,并提供相應(yīng)的代碼示例,感興趣的朋友跟隨小編一起看看吧2024-05-05