简单入门小程序02

上一节我们讲到《智慧插座》index 页面的制作，本文接下来讲 me 个人页面的制作。

本文的知识点有：

* 利用 wx:if 实现页面内部 tab 切换

* wx:for 的列表遍历

先上 me.wxss 代码

/* pages/me/me.wxss */

.user {
width: 100%;
padding: 20rpx 0;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
}

.userimg {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
border: 1px solid #eee;
}

.userDetail {
font-size: 30rpx;
color: #666;
line-height: 60rpx;
margin-left: 40rpx;
}

.tab {
display: flex;
justify-content: cen
4000
ter;
font-size: 30rpx;
}

.tabBtn {
margin-top: 20rpx;
padding: 20rpx;
background: #1296db;
color: #fff;
margin: 40rpx 10rpx 20rpx 10rpx;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
}

.detail {
width: 600rpx;
padding: 20rpx;
margin: 20rpx auto;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
background: #fff;
}

.img {
width: 100rpx;
height: 100rpx;
}

.desc {
font-size: 30rpx;
color: #666;
line-height: 50rpx;
margin: 0 20rpx;
}

.active {
animation: mymove 3s linear infinite;
}

@keyframes mymove {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.tab-pannel {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #eee;
padding: 20rpx;
margin-top: -14rpx;
width: 670rpx;
margin-left: auto;
margin-right: auto;
}

.icon {
width: 0;
height: 0;
border-left: 50rpx solid transparent;
border-right: 50rpx solid transparent;
border-bottom: 50rpx solid #eee;
position: relative;
left: 40rpx;
top: -8rpx;
}

me.json 代码

{
"navigationBarTitleText": "个人中心"
}

me.wxml 代码

<!--pages/me/me.wxml-->
<view class='user'>
<image src='http://socket.web.ecxpp.net/static/default/user.jpg' class='userimg'></image>
<view class='userDetail'>
<view>先生/小姐，您好！</view>
<view>手机号：13800138000</view>
<view>钱包余额：
<text style='color:red'>9856</text>
</view>
</view>
</view>
<view class='tab'>
<view>
<view class='tabBtn active1' bindtap='using'>正在使用</view>
<view class='icon' wx:if="{{state==='using'}}"></view>
</view>
<view>
<view class='tabBtn' bindtap='record'>使用记录</view>
<view class='icon' wx:if="{{state==='record'}}"></view>
</view>
</view>
<view class='tab-pannel' wx:if="{{state==='using'}}">
<view wx:if="{{show}}">
<view class='detail' wx:if="{{use1}}" bindtap='use1'>
<view class='imgDiv'>
<image class='img active' src='/images/chazuo3.png'></image>
</view>
<view class='desc'>
<view>1号插座</view>
<view>插座编号：00000000002</view>
<view>收费模式：
<text style='color:red'>按电量收费</text>
</view>
<view>插座状态：
<text style='color:red'>使用中</text>
</view>
<view></view>
<view></view>
</view>
</view>
<view class='detail' wx:if="{{use2}}" bindtap='use2'>
<view class='imgDiv'>
<image class='img active' src='/images/chazuo3.png'></image>
</view>
<view class='desc'>
<view>2号插座</view>
<view>插座编号：00000000002</view>
<view>收费模式：
<text style='color:red'>按电量收费</text>
</view>
<view>插座状态：
<text style='color:red'>使用中</text>
</view>
</view>
</view>
</view>
<view wx:else style='text-align:center;color:#666;font-size:30rpx'>无</view>
</view>
<view class='tab-pannel' wx:if="{{state==='record'}}">
<block wx:for="{{record}}">
<view class='detail'>
<view class='imgDiv'>
<image class='img' src='/images/chazuo2.png'></image>
</view>
<view class='desc'>
<view>1号插座</view>
<view>插座编号：{{item.num}}</view>
<view>开始时间：{{item.ctime}}</view>
<view>结束时间：{{item.etime}}</view>
<view>此次消费：
<text style='color:#E65100'>￥{{item.cost}}</text>
</view>
</view>
</view>
</block>
</view>

wx:if=”{{state===’using’}}” 和 wx:if=”{{state===’record’}}” 这两者判断 state 的值，默认显示‘正在使用’板块，当我们点击使用记录时，利用 js 代码修改 state 为 record , 则使用记录板块显示。

<block wx:for="{{record}}">

表示遍历 record 数组

record 数组为：

record:[
{
num: '000000000001',
ctime: '2017-08-14 14:11',
etime: '2017-08-14 18:11',
cost: 20
},
{
num:'000000000002',
ctime: '2017-08-15 14:11',
etime: '2017-08-16 18:11',
cost: 202
},
{
num:'000000000003',
ctime: '2017-08-14 14:11',
etime: '2017-08-16 18:21',
cost: 2055
},
{
num:'000000000004',
ctime: '2017-08-14 14:11',
etime: '2017-08-11 18:11',
cost: 2098
},
{
num:'000000000001',
ctime: '2017-08-14 14:11',
etime: '2017-08-16 00:11',
cost: 15
}
]

数组的长度为 5，即使用记录为 5 个。{{item.num}} 指的是获取 record 数组内对象的 num 值，这样便可以实现简单的一串代码实现 5 个

<li>

<block wx:for="{{record}}">
<view class='detail'>
<view class='imgDiv'>
<image class='img' src='/images/chazuo2.png'></image>
</view>
<view class='desc'>
<view>1号插座</view>
<view>插座编号：{{item.num}}</view>
<view>开始时间：{{item.ctime}}</view>
<view>结束时间：{{item.etime}}</view>
<view>此次消费：
<text style='color:#E65100'>￥{{item.cost}}</text>
</view>
</view>
</view>
</block>

me.js 代码如下

// pages/me/me.js
const app = getApp()
Page({

/**
* 页面的初始数据
*/
data: {
state:'using',
show:true,
record:[
{
num: '000000000001',
ctime: '2017-08-14 14:11',
etime: '2017-08-14 18:11',
cost: 20
},
{
num:'000000000002',
ctime: '2017-08-15 14:11',
etime: '2017-08-16 18:11',
cost: 202
},
{
num:'000000000003',
ctime: '2017-08-14 14:11',
etime: '2017-08-16 18:21',
cost: 2055
},
{
num:'000000000004',
ctime: '2017-08-14 14:11',
etime: '2017-08-11 18:11',
cost: 2098
},
{
num:'000000000001',
ctime: '2017-08-14 14:11',
etime: '2017-08-16 00:11',
cost: 15
}
]
},
//点击正在使用改变 state 为 using
using() {
//设置本页data数据
this.setData({
state: 'using'
})
},
//点击使用记录改变 state 为 record
record() {
this.setData({
state: 'record'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 页面显示时从全局的data中获取use1,use2并设置，注意必须在顶部 const app = getApp()
this.setData({
use1: app.globalData.use1,
use2: app.globalData.use2
})
// 这段代码实现当使用记录为0时，该板块显示内容为‘无’
// 其原理是将插座1和插座2合并为一个数组，当两者都为false时即没有插座正在使用时，则显示‘无’
// wxml 使用的是wx:if 和 wx:else
let arr = new Array(app.globalData.use1, app.globalData.use2)
if(arr[0] === false && arr[1] === false) {
// show 控制着 ‘无’的显示或隐藏
this.setData({
show:false
})
}
else{
this.setData({
show: true
})
}
},
//  点击正在使用的插座1跳转到支付页面并携带参数use=1
use1(){
wx.navigateTo({
url: '/pages/pay/pay?use=1'
})
},
// 点击正在使用的插座2跳转到支付页面并携带参数use=2
use2() {
wx.navigateTo({
url: '/pages/pay/pay?use=2'
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

效果图：



相关的代码作用我已经在文中有所注释，希望你能看得懂

以上就是首页index的全部内容，接下来进入支付页面pay的实现。请移步简单入门小程序 03