《微信小程序开发从入门到实战》学习三十二
3.5 开发我的投票页面与使用tab栏切换页面
实现很简单，简单的列表页面，但是需要加在tabBar那里，加油。
3.5.1 开发我的投票页面
在app.js里的pages的数组里加上"pages/myVote/myVote"，保存了后出现了myVote文件夹。
在myVote.wxml里加入视图层的结构：
<view class="container">
<block wx:for="{{voteList}}">
<view class="vote" bind:tap="onTapValue" data-vote-id="item._id">{{item.voteTitle}}</view>
</block>
</view>
在myVote.js文件中加入逻辑层的功能。代码如下：
// pages/myVote/myVote.js
Page({
/**
* 页面的初始数据
*/
data: {
voteList: [] //用户创建的投票列表，包含投票的ID和标题
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getMyVoteListFromServer() //从服务端获取数据
},
getMyVoteListFromServer() {
// TODO 当前使用伪造的数据，后面使用云开发技术从服务端获取数据
const voteList = [{
_id: 'test',
voteTitle: '测试投票1'
},{
_id: 'test',
voteTitle: '测试投票2'
},{
_id: 'test',
voteTitle: '测试投票3'
}]
this.setData({
voteList
})
},
onTapVote(e){
const voteID = e.currentTarget.dataset.voteId //这里dataset.voteId别改，data-vote-id取值驼峰是这样
wx.navigateTo({
url: '/pages/vote/vote?voteID=' + votID,
})
}
})
在wxss里加些样式，代码如下：
.vote {
margin: 20rpx;
padding: 24rpx;
background: #eee;
border-bottom: 1rpx solid #fff;
}
预览效果如下：
投票页面真简单，哈哈。期待下一章云开发
3.5.2 使用tab栏切换页面
首页与我的投票页面是两个普通的页面，需要在app.json文件设置tabBar属性将它们设置到底部tarBar栏。tabBar属性与windows属性同级，放在它下面。app.json代码如下：
"tabBar": {
"color": "#333",
"selectedColor": "#26AB28",
"backgroundColor": "#eee",
"borderStyle": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "新建"
},{
"pagePath": "pages/myVote/myVote",
"text": "我的"
}]
}
预览效果如下：
3-43
截图的调试器tabBar样式不对劲
但手机扫描二维码，在手机上看很正常。
以为底部tabBar很难，想不到实现那么简单，微信开发工具做了不少封装。
下一章 云开发敬请期待