微信小程序自定义选项卡tabBar模板底部顶部导航

小程序让每个页面都有tabbar 选项卡导航

1.创建模板文件

\pages\template\tabBar.wxml

Run code

Cut to clipboard

• 1

tabBar.wxml文件代码

<template name="tabBar">
<view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
</template>

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

2.引入模板文件
在需要使用模板的页面 .wxss文件中import进来；
或者 直接在app.wxss中引入，这样只需要一次引入，其他文件就不用再引入

以about.wxml页面为例

<!--pages/about/about.wxml-->

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

Run code

Cut to clipboard

• 1
• 2
• 3
• 4

about.js

App.editTabBar(this);//添加tabBar数据

Run code

Cut to clipboard

• 1

3.修改app.js文件

注意前后逗号

//修改tabBar的active值
editTabBar: function (that) {

var tabBar = that.data.tabBar;

var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = '/'+currentPage.route //当前页面url


for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == url) {
tabBar.list[i].active = true;//根据页面地址设置当前页面状态
}
}

that.setData(that.data);
//that.setData(tabBar); 这样页面不会渲染新数据
//console.log(that.data);

}

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

4.配置页面导航内容

注意在头部写入

var App = getApp();

Run code

Cut to clipboard

• 1

配置tabBar

//配置tabBar
tabBar: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"active": false
},
{
"pagePath": "/pages/about/about",
"text": "关于我们",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"selectedColor": "#4EDF80",
"active": false
},
{
"pagePath": "/pages/logs/logs",
"text": "日志",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"selectedColor": "#4EDF80",
"active": false
}
],
"position": "bottom"
}

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

5.tabBar全局样式

app.wxss 添加到文件末尾即可

/*写了全局的的*属性，*=page，因此下面針對page配置就没反应了*/

page, view {
margin: 0;
padding: 0;
font-size: 13px;
color: #333;
background: none;
text-align: left;
}

page {
height: 100%;
font-family: "Microsoft Yahei";
background: #f4f8fb;
}


/* 父元素-横向排列（主轴） */

.flex-h {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ *//* 09版 */
-webkit-box-orient: horizontal;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}

/* 父元素-水平两端对齐（主轴是横向才生效） */

.flex-hsb {
/* 09版 */
-webkit-box-pack: space-between;
/* 12版 */
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
/* 其它取值如下：
align-items 主轴原点方向对齐
flex-end 主轴延伸方向对齐
space-between 等间距排列，首尾不留白
space-around 等间距排列，首尾留白
*/
}

/* 父元素-水平居中（主轴是横向才生效） */

.flex-hc {
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 其它取值如下：
align-items 主轴原点方向对齐
flex-end 主轴延伸方向对齐
space-between 等间距排列，首尾不留白
space-around 等间距排列，首尾留白
*/
}

/* 父元素-纵向排列（主轴） */

.flex-v {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ *//* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}

/* 父元素-竖直居中（主轴是横向才生效） */

.flex-vc {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}


/*tabBar*/

.tab-bar {
position: fixed;
z-index: 99999;
width: 100%;
height: 100rpx;
/*line-height: 100rpx;*/
font-size: 22rpx;
color: #9b9b9b;
background: #fff;
text-align: center;
}

.tab-bar .menu-item {
display: block;
flex: 1;
/*width: 33.3%;*/
height: 100%;
}

.tab-bar .menu-item image {
margin: 10rpx auto 0 auto;
display: block;
width: 50rpx;
height: 50rpx;
}

.tab-bar .menu-item.active {
color: #53df87;
}

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

示例  源码下载 

6.全局配置tabBar
如果多个页面共用tabBar配置文件，则按以下方式修改编写

a.修改app.js
tabBar 配置写在globalData里面

//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res.code);
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
//修改tabBar的active值
editTabBar: function (that) {

var tabBar = this.globalData.tabBar;

var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = '/'+currentPage.route //当前页面url


for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == url) {
tabBar.list[i].active = true;//根据页面地址设置当前页面状态
}
}

that.setData(this.globalData);
//that.setData(tabBar); 这样页面不会渲染新数据
//console.log(that.data);

},
globalData: {
userInfo: null,
//配置tabBar
tabBar: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"active": false
},
{
"pagePath": "/pages/about/about",
"text": "关于我们",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"selectedColor": "#4EDF80",
"active": false
},
{
"pagePath": "/pages/logs/logs",
"text": "日志",
"iconPath": "/img/1.png",
"selectedIconPath": "/img/2.png",
"selectedColor": "#4EDF80",
"active": false
}
],
"position": "bottom"
}
}
})

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

b.以about页面为例

1.创建模板文件
2.引入模板文件
5.tabBar全局样式
这三步骤不变，跟上面一样

Run code

Cut to clipboard

• 1
• 2
• 3
• 4

about.js文件修改为 删除data里面的配置数据

新增修复是否当前页面自定义tabBar配置文件还是全局文件

c.是否页面自定义配置

//修改tabBar的active值
editTabBar: function (that) {

var tabBar = this.globalData.tabBar;

//新增如果是页面自定义配置
if (that.data.tabBar) tabBar = this.globalData.tabBar;

var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = '/'+currentPage.route //当前页面url


for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == url) {
tabBar.list[i].active = true;//根据页面地址设置当前页面状态
}
}
//新增如果是页面自定义配置
if (that.data.tabBar) that.setData(that);
else that.setData(this.globalData);

//that.setData(tabBar); 这样页面不会渲染新数据
//console.log(that.data);

}

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

微信小程序-template模板使用

7.模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板； 
2、新建一个courseList.wxml文件来定义模板； 
3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。

注意： 
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分； 
b.模板中的数据都是展开之后的属性。

<template name="courseLeft">
<navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
<view class="item mr26">
<image src="{{imagePath}}" mode="aspectFill"></image>
<view class="course-title">
<text class="title">{{courseName}}</text>
<text class="author">- {{teacherName}}</text>
</view>
<view class="course-info clearfix">
<view class="fl"><text class="play">{{playCount}}</text></view>
<view class="fr"><text class="grade">{{score}}</text></view>
</view>
<view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
</view>
</navigator>
</template>

<template name="courseRight">
<navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
<view class="item">
<image src="{{imagePath}}" mode="aspectFill"></image>
<view class="course-title">
<text class="title">{{courseName}}</text>
<text class="author">- {{teacherName}}</text>
</view>
<view class="course-info clearfix">
<text class="play fl">{{playCount}}</text>
<text class="grade fr">{{score}}</text>
</view>
<view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
</view>
</navigator>
</template>

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

二、使用模板

1、使用 is 属性，声明需要的使用的模板

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

Run code

Cut to clipboard

• 1

2、将模板所需要的 data 传入，一般我们都会使用列表渲染。

<block wx:for="{{courseList}}">
<template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template>
</block>

Run code

Cut to clipboard

• 1
• 2
• 3
• 4

注意： 
a.可以通过表达式来确定使用哪个模板

is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"

Run code

Cut to clipboard

• 1

或者通过

wx:if

Run code

Cut to clipboard

• 1

来确定。index是数组当前项的下标。

<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

Run code

Cut to clipboard

• 1
• 2

b. data 是要模板渲染的数据，

data="{{...item}}"

Run code

Cut to clipboard

• 1

写法是ES6的写法，item是wx:for当前项，... 是展开运算符，在模板中不需要再

{{item.courseName}}

Run code

Cut to clipboard

• 1

而是直接{{courseName}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。 
2、在需要使用模板的页面 .wxss文件中import进来；
或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";

Run code

Cut to clipboard

• 1

参考：
http://blog.csdn.net/eadio/article/details/54405594
http://blog.csdn.net/u013778905/article/details/59646241  tabbar.rar 

微信小程序获取当前页面的路径的方式
使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options

Run code

Cut to clipboard

• 1
• 2
• 3
• 4
• 5
• 6

微信小程序遇到修改数据后页面不渲染的问题解决 setData 修改页面
要调用一下setData()方法

Run code

Cut to clipboard

• 1
• 2