欧洲杯网上直播:微信小程序标签栏底部导航
1.app.js代码如下:
editTabBar: function() {
var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
0 != s.indexOf("/") && (s = "/" + s);
for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
t.setData({
tabbar: e
});
},
tabBar: {
color: "#123",
selectedColor: "#1ba9ba",
borderStyle: "#1ba9ba",
backgroundColor: "#fff",
list: [ {
pagePath: "/we7/pages/index/index",
iconPath: "/we7/resource/icon/home.png",
selectedIconPath: "/we7/resource/icon/homeselect.png",
text: "首页"
}, {
pagePath: "/we7/pages/user/index/index",
iconPath: "/we7/resource/icon/user.png",
selectedIconPath: "/we7/resource/icon/userselect.png",
text: "我的"
} ]
},
globalData: {
userInfo: null,
tabbar: {
color: "#333",
selectedColor: "#d0501f",
backgroundColor: "#ffffff",
borderStyle: "#d5d5d5",
list: [ {
pagePath: "/pages/seller/gzt",
text: "工作台",
iconPath: "/pages/images/gzt@3x.png",
selectedIconPath: "/pages/images/gztxz@3x.png",
selected: !0
}, {
pagePath: "/pages/seller/cp/cplb",
text: "商品",
iconPath: "/pages/images/dbdc.png",
selectedIconPath: "/pages/images/dbdcxz.png",
selected: !1
},
position: "bottom"
}
},
template.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'}}">
<navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}" url="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index">
<image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</view>
</template>
3.template.wxss
.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;
}
在需要用的页面(wxml)添加如下代码
<import src="template.wxml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>
在需要的样式(wxss)添加如下代码
@import "template.wxss";
在需要的js页面添加如下代码:
var dsq, app = getApp();添加在顶部
tabbar: {},在data中添加
app.editTabBar();在onLoad中添加
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/ssfkl/s51096.shtml
我要分享到:
必备CSS教程 Essential CSS Tutorials
- • css height
- • css line-height
- • css width
- • css min-width
- • css max-width
- • css min-height
- • css max-height
- • css border
- • css background
- • css float
- • css clear
- • css display
- • css font
- • css text-transform
- • css英文首字母大写
- • css font-variant
- • css font-weight
- • css font-style
- • css text-decoration
- • css 删除线
- • div css 虚线
- • css 注释
- • html 注释
- • css padding
- • css margin
- • css 文本
- • css font-size
- • css font-family
- • css color
- • css text-align
- • css text-indent
- • css 超链接(css a)
- • css 优化压缩
- • css id(css #)
- • css class(css .)
- • css ul li列表
- • css 圆角圆边
- • css 父级子级
- • css 指针概念
- • css cursor
- • css overflow
- • html px em pt网页单位
- • CSS important
- • CSS position
- • css z-index
- • css white-space
- • css img图片
- • css class id
- • css link与@import区别
- • css 选择器
- • css引入html
必备HTML基础教程 Essential HTML Tutorials
- • html img图片标签
- • html em标签(EM强调标签)
- • html strong加粗(strong标签)
- • html B加粗(b加粗标签)
- • strong与B加粗区别
- • h1 h2 h3 h4标签(html标题标签)
- • html A超链接锚文本
- • html注释
- • html head头部标签
- • html title标题标签
- • html meta标签
- • html link标签
- • html i斜体标签
- • html u下划线标签
- • html s删除线标签
- • html换行br标签
- • html p段落标签
- • p标签与br标签区别
- • html div标签元素
- • html span标签
- • html font标签
- • html script标签
- • html px em pt网页单位
- • html ul li列表
- • ol li列表
- • dl dt dd标签组
- • table tr td表格
- • table tr th表格
- • html form表单
- • html form input
- • html form textarea文本区域
- • html select下拉与跳转(Html select)
- • html iframe框架
- • html网页结构
- • htm html shtml区别用法
- • 网页编码charset
- • UTF-8 GBK UTF8 GB2312区别联系
- • 先写html还是先写CSS
- • 显示扩展名
- • html标签大全集合
- • html常用标签
- • 网页源代码是什么
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-11-05 10:54 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。
最新文章NEWS
- • 虚拟主机相关知识
- • DIV CSS加载失败
- • DIV+CSS规范命名大全集合
- • CSS margin属性与用法教程
- • padding_css padding用法详解
- • DIV+CSS中让布局居中_背景图片居中_文字内容居中
- • html与xhtml的区别规范是什么
- • DIV+CSS与TABLE的网页优势何在?
- • 浅谈DIV+CSS设计开发的Xhtml网页对SEO优化的影响
- • 开发DIV+CSS的工具集合
CSS 特效CSS EFFECTS
纯DIV+CSS下拉菜单模块模板
DIV+CSS分页_CSS翻页代码模板
css form实例 用CSS实现表单form布局实例
经典DIV+CSS下拉菜单
div+css不间断上下滚动模板
向上不间断滚动div+css+js模板
相关文章RELATED
- • 澳门威斯尼人平台:MySQL执行计划的深入分析
- • 澳门葡京六合彩:微软是如何查获内部泄密者的?这套路防不胜防
- • 金沙棋牌游戏:Chrome 与 Firefox 将取消对 FTP 的支持
- • 辉煌国际平台:vue-cli3全面配置详解
- • 欧洲杯网上直播:微信小程序标签栏底部导航
- • 赢波网:谈谈Spring Boot 2.0迁移指南的主要注意事项
- • 永盈会娱乐城:HTML页面自动清理js和css文件的缓存(自动添加版本号)
- • 广东快乐十分的选择标准
- • 广东快乐十分的消费水平
- • 游戏玩家的娱乐天堂——广东快乐十分


