欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

支付寶小程序tabbar底部導(dǎo)航

 更新時間:2018年11月06日 08:41:30   作者:Arrogance-亓  
這篇文章主要為大家詳細介紹了支付寶小程序重寫tabbar底部導(dǎo)航,具有一定的參考價值,感興趣的小伙伴們可以參考一下

支付寶小程序重寫tabbar底部導(dǎo)航,供大家參考,具體內(nèi)容如下

1.app.js中代碼如下

editTabBar: function () {
  var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.route;
  console.log(t)
  console.log(s)
  0 != s.indexOf("/") && (s = "/" + s);
  for (var n in e.items) e.items[n].selected = !1, e.items[n].pagePath == s && (e.items[n].selected = !0);
  t.setData({
   tabbar: e
  });
 },
 globalData: {
  userInfo: null,
  //配置tabbar
  tabbar: {
   textColor: "#333",
   selectedColor: "#d0501f",
   backgroundColor: "#ffffff",
   borderStyle: "#d5d5d5",
   items: [{
    pagePath: "/pages/seller/gzt/gzt",
    name: "工作臺",
    icon: "/pages/icon/index.png",
    activeIcon: "/pages/icon/index_1.png",
    selected: !0
    },{
    pagePath: "/pages/seller/shezhi/shezhi",
    name: "設(shè)置",
    icon: "/pages/images/sz@3x.png",
    activeIcon: "/pages/images/xzsz.png",
    selected: !1
   }],
   position: "bottom"
  }
 }

2.template.axml代碼如下

<template name="tabbar">
  <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
    <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.items.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
      <image class="tabbar_icon" src="{{item.selected?item.activeIcon:item.icon}}"></image>
      <text>{{item.name}}</text>
    </navigator>
  </view>
</template>

3.template.acssl代碼如下

 .tabbar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  border-top: 0.5rpx solid #d5d5d5;
}

.tabbar_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 25rpx;
  height: 100%;
}

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

4.在需要引入的頁面(.axml)中

 - <import src="../template.axml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>

5.在需要引入的樣式(acss)中

@import "../template.acss";

6.在需要引入的js中

var app=getApp(); //放在頂部
 tabbar:{},     //放在data中
 app.editTabBar(); //放在onLoad中

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript模擬重力狀態(tài)下拋物運動的方法

    JavaScript模擬重力狀態(tài)下拋物運動的方法

    這篇文章主要介紹了JavaScript模擬重力狀態(tài)下拋物運動的方法,實例分析了javascript操作dom元素模擬運動的方法,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • WebPack工具運行原理及入門教程

    WebPack工具運行原理及入門教程

    這篇文章主要介紹了WebPack工具運行原理及入門教程,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-12-12
  • 原型方法的不同寫法居然會影響調(diào)試的解決方法

    原型方法的不同寫法居然會影響調(diào)試的解決方法

    原型方法的不同寫法居然會影響調(diào)試的解決方法...
    2007-03-03
  • js實現(xiàn)多圖左右切換功能

    js實現(xiàn)多圖左右切換功能

    這篇文章主要介紹了js實現(xiàn)多圖左右切換功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 小程序登錄之支付寶授權(quán)的實現(xiàn)示例

    小程序登錄之支付寶授權(quán)的實現(xiàn)示例

    這篇文章主要介紹了小程序登錄之支付寶授權(quán)的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 如何用RxJS實現(xiàn)Redux Form

    如何用RxJS實現(xiàn)Redux Form

    這篇文章主要介紹了如何用RxJS實現(xiàn)Redux Form,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Openlayers學(xué)習(xí)之加載鷹眼控件

    Openlayers學(xué)習(xí)之加載鷹眼控件

    這篇文章主要介紹了Openlayers學(xué)習(xí)之加載鷹眼控件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 談?wù)凱HP中相對路徑的問題與絕對路徑的使用

    談?wù)凱HP中相對路徑的問題與絕對路徑的使用

    經(jīng)常看到有人踩在了PHP路徑的坑上面了,感覺有必要來說說PHP中相對路徑的一些坑,以及PHP中絕對路徑的使用,下面一起來看看。
    2016-08-08
  • 小程序圖片長按識別功能的實現(xiàn)方法

    小程序圖片長按識別功能的實現(xiàn)方法

    這篇文章主要介紹了小程序圖片長按識別功能的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • javascript實現(xiàn)簡單打字游戲

    javascript實現(xiàn)簡單打字游戲

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單打字游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10

最新評論