溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-09-25 14:42:28 來源：腳本之家 閱讀：170 作者：w10322331 欄目：web開發(fā)

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

微信小程序?qū)崿F(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,  //是否是當前頁，0不是 1是
    style: 0,   //樣式
    ico: 'icon-qiugouguanli', //不同圖標
    fn: 'gotoCompanyIndex'  //對應處理函數(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)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手