《微信小程序开发从入门到实战》学习三十二

3.5 开发我的投票页面与使用tab栏切换页面

实现很简单，简单的列表页面，但是需要加在tabBar那里，加油。

3.5.1 开发我的投票页面

在app.js里的pages的数组里加上"pages/myVote/myVote"，保存了后出现了myVote文件夹。

在myVote.wxml里加入视图层的结构：

  

    {{item.voteTitle}}

  

在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很难，想不到实现那么简单，微信开发工具做了不少封装。

下一章 云开发敬请期待