第一次点击组件显示不了数组的数据,取消后再次点击进入就可以了,如下两图
代码如下:
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<!-- 时间选择器 -->
<picker class='time-picker' mode="multiSelector" bindtap="pickerTime" bindchange="bindStartMultiPickerChange" range="{{multiArray}}" value="{{multiIndex}}">选择时间</picker>
<!-- 启动按钮 -->
<button class="button">启动</button>
</view>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
,
// 时间选择器使用的数组
multiIndex: [],
multiArray: []
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function() {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
// 时间获取函数
pickerTime: function () {
var date = new Date();
var day = ['今天', '明天'];
var hours = [];
var minute = [];
for (var i = 2; i <= 7; i++) {
// 今天,明天后从第三天往后的时间
var date_3 = new Date();
date_3.setDate(date.getDate() + i);
var d = (date_3.getMonth() + 1) + '-' + date_3.getDate();
day.push(d);
}
for (var i = 0; i < 24; i++) {
hours.push(i);
}
for (var i = 0; i < 60; i++) {
minute.push(i);
}
var timeData = {
multiIndex: this.data.multiIndex,
multiArray: this.data.multiArray
};
timeData.multiArray[0] = day;
timeData.multiArray[1] = hours;
timeData.multiArray[2] = minute;
this.setData(timeData);
}
})