• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序—自定义tabber

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

上集回顾:因为之前说过我们公司的登录流程,菜单的显示是根据不同的用户角色显示不同的,所以不能像小程序api提供的直接配置固定的菜单;

微信api全局配置:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

1. 先建文件,见图

关于模块wxs/templates

2. 代码如下

-----table.js

var app = getApp();

 

Page({

data: {

tabbar: {}

},

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

app.editTabBar();

},

onReady: function () {

// 页面渲染完成

},

onShow: function () {

// 页面显示

},

onHide: function () {

// 页面隐藏

},

onUnload: function () {

// 页面关闭

}

})

 -----table.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.menus}}" wx:for-item="item" wx:key="index">

<navigator class="tabbar_nav" url="{{item.action.value}}"

style="width:{{1/tabbar.menus.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.label}}</text>

</navigator>

</block>

</view>

</template>

 

<template is="tabbar" data="{{tabbar}}"/>

----tabbar.wxss

.tabbar_box{

display: flex;

flex-direction: row;

justify-content: space-around;

position: fixed;

bottom: 0;

left: 0;

z-index: 999;

width: 100%;

height: 110rpx;

background-color: #fff;

border-top: 1px solid #e5e5e5

}

.tabbar_nav{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

/* font-size: 24rpx; */

height: 100%;

}

.tabbar_icon{

width: 48rpx;

height: 48rpx;

}

----app.js 这个部分就是为了让菜单可以正常的跳转和选中状态

editTabBar: function () {

var tabbar = this.globalData.tabbar,

currentPages = getCurrentPages(),

_this = currentPages[currentPages.length - 1],

pagePath = _this.__route__;

if ((pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath)){

for (var i in tabbar.menus) {

tabbar.menus[i].selected = false;

(tabbar.menus[i].action.value == pagePath) && (tabbar.menus[i].selected = true);

}

_this.setData({

tabbar: tabbar

});

}

},

globalData: {

userInfo: null,

// roleCodes:null,

tempFilePaths:[],

tabbar: {

color: "#878787",

selectedColor: "#08c8d5",

backgroundColor: "#ffffff",

borderStyle: "light",

position: "bottom",

menus: null,

},

},

----获取菜单数据页面.js   菜单的路由是后台配好的;选中的状态是前端添加的,然后再app.js中改变

var app = getApp();

// 获取的菜单数据赋值传给 app.globalData

app.globalData.tabbar.menus = res.data.menus;

// 在返回的menus里面添加selected键值对

var menus = res.data.menus

menus.forEach((value, index) => {

if (index == 0) {

value.selected = true

} else {

value.selected = false

}

});

使用页面的引用:

----wxml

<import src="../templates/tabbar/tabbar.wxml" />

<template is="tabbar" data="{{tabbar}}" />


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序登录发布时间:2022-07-18
下一篇:
个人如何免费申请一个微信小程序账号进行开发尝鲜发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap