初学小白提个问题,picker组件的调用问题,为何点击第二次才出现内容?
发布于 6 年前 作者 zfu 3036 次浏览 来自 官方Issues

第一次点击组件显示不了数组的数据,取消后再次点击进入就可以了,如下两图

代码如下:

<!--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);

}


})

回到顶部