网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

微信小程序?qū)嵱眯〗M件：自定義tabbar

發(fā)布時(shí)間：2018-04-13 14:36 所屬欄目：小程序開(kāi)發(fā)教程

微信小程序 自定義tabbar


創(chuàng)建wxml模板


<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
        <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
            <navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
                <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
                <text>{{item.text}}</text>
            </navigator>
        </block>
    </view>
</template>wxss布局

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    border-top: 1rpx solid gray; 
}

.tabbar_nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    height: 100%;
}

.tabbar_icon{
    width: 61rpx;
    height: 61rpx;
}

布局不是重點(diǎn)也可以自定義布局也可以引用我寫(xiě)好的樣式重點(diǎn)來(lái)了 tabbar的參數(shù)配置

tabbar:{
      color: "#000000",
      selectedColor: "#0f87ff",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "/pages/tabbar/tabbar",
          text: "項(xiàng)目",
          iconPath: "/images/item.png",
          selectedIconPath: "/images/item_HL.png",
          selected: true
        },
        {
          pagePath: "/pages/address/address",
          text: "通訊錄",
          iconPath: "/images/ts.png",
          selectedIconPath: "/images/ts1.png",
          selected: false
        },
        {
          pagePath: "/pages/personal/personal",
          text: "文件",
          iconPath: "/images/wjj.png",
          selectedIconPath: "/images/wjj1.png",
          selected: false
        }
      ],
      position: "bottom"
    }


有沒(méi)有感覺(jué)很熟悉，沒(méi)錯(cuò)就是你熟悉的tababar配置，僅僅增加了一個(gè)selected參數(shù)來(lái)表示選中的狀態(tài)
另外一點(diǎn)要注意的是我們的tabbar數(shù)據(jù)配置在app.js里面而不是app.json里面最后還有一個(gè)比較重要的點(diǎn) 在app.js里面的一個(gè)函數(shù)

editTabBar: function(){
    var tabbar = this.globalData.tabbar,
        currentPages = getCurrentPages(),
        _this = currentPages[currentPages.length - 1],
        pagePath = _this.__route__;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for(var i in tabbar.list){
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },

我們完整的app.js是這樣的

//app.js
App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調(diào)用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  editTabBar: function(){
    var tabbar = this.globalData.tabbar,
        currentPages = getCurrentPages(),
        _this = currentPages[currentPages.length - 1],
        pagePath = _this.__route__;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for(var i in tabbar.list){
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
  globalData:{
    userInfo:null,
    tabbar:{
      color: "#000000",
      selectedColor: "#0f87ff",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "/pages/tabbar/tabbar",
          text: "項(xiàng)目",
          iconPath: "/images/item.png",
          selectedIconPath: "/images/item_HL.png",
          selected: true
        },
        {
          pagePath: "/pages/address/address",
          text: "通訊錄",
          iconPath: "/images/ts.png",
          selectedIconPath: "/images/ts1.png",
          selected: false
        },
        {
          pagePath: "/pages/personal/personal",
          text: "文件",
          iconPath: "/images/wjj.png",
          selectedIconPath: "/images/wjj1.png",
          selected: false
        }
      ],
      position: "bottom"
    }
  }
})

生成的東西我沒(méi)有刪掉到這準(zhǔn)備工作已經(jīng)完成  下面就是怎么使用在wxml引入創(chuàng)建的模板并使用

<import src="../tabbar/tabbar.wxml"/>
<template is="tabbar" data="{{tabbar}}"/>


我這里是相對(duì)路徑，最好寫(xiě)成絕對(duì)路徑

wxss中引入樣式

@import "/pages/tabbar/tabbar.wxss"



js中調(diào)用函數(shù)

//獲取app實(shí)例
var app = getApp();

Page({
  data:{
    tabbar:{}
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)

    //調(diào)用函數(shù)
    app.editTabBar(); 
  },
  onReady:function(){
    // 頁(yè)面渲染完成
  },
  onShow:function(){
    // 頁(yè)面顯示
  },
  onHide:function(){
    // 頁(yè)面隱藏
  },
  onUnload:function(){
    // 頁(yè)面關(guān)閉
  }
})

注意在每個(gè)配置在tabbar中的頁(yè)面都要有這三步，因?yàn)檫@個(gè)是頁(yè)面跳轉(zhuǎn)了
還有一個(gè)問(wèn)題就是頁(yè)面跳轉(zhuǎn)的時(shí)候會(huì)閃一下，網(wǎng)絡(luò)慢的時(shí)候更明顯
后面我會(huì)做一個(gè)不是跳轉(zhuǎn)頁(yè)面的tabbar


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/23336.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×