微信小程序同一个方法内部多次 setData 无效解决方法

近期我在进行微信小程序开发的时候,遇到了一个函数需要多次 setData
setData 进行完毕后,通过 console.log( this ) 来查看数据,发现数据是已经更新成功了
但是页面却没有渲染出结果来
因此推测可能是因为多次执行 setData,加上本身执行的操作比较复杂,导致小程序页面没能反应过来。

解决方法

后来通过定义一个对象,把所有要 setData 的数据都存放进对象里面,等执行的差不多的时候再一次性通过 setData 方法把数据更新过去

let setData: any = {}   // 这个就是存放将要 setData 数据的对象
let start_time = ""
let end_time = ""

// 判断开始和结束显示的时间
if (s_hour >= 0 && s_hour < 6) {
    start_time = '0:00'
    s_hour_head = '00:00:00'
} else if (s_hour >= 6 && s_hour < 12) {
    start_time = '6:00'
    s_hour_head = '06:00:00'
} else if (s_hour >= 12 && s_hour < 18) {
    start_time = '12:00'
    s_hour_head = '12:00:00'
} else if (s_hour >= 18 && s_hour < 24) {
    start_time = '18:00'
    s_hour_head = '18:00:00'
}

if (e_hour >= 0 && e_hour < 6) {
    end_time = '6:00'
} else if (e_hour >= 6 && e_hour < 12) {
    end_time = '12:00'
} else if (e_hour >= 12 && e_hour < 18) {
    end_time = '18:00'
} else if (e_hour >= 18 && e_hour < 24) {
    end_time = '0:00'
}


/** 
 * 计算灰色进度条的长度
 * 6 个小时的间距,时间戳为 21600000
 * 因此灰色进度条的区间一定是 21600000 的倍数
 * 用 dur_time / 21600000 并向上取整即可
 */

// 计算灰色进度条开始的时间戳
let s_hour_head_tmp = new Date(new Date(this.start_task_time).toLocaleDateString().replace(/\//g, '-') + ' ' + s_hour_head).valueOf()

// 计算灰色进度条的总长度
let total_dur_time = Math.ceil(dur_time / 21600000) * 21600000

// 计算橙色进度条开始的时间戳
let s_hour_det_tmp = new Date(this.start_task_time).valueOf()


/** 这里把所有要设置的数据放进 setData 对象里面 */
setData['task.task_detail.start_time'] = start_time
setData['task.task_detail.end_time'] = end_time
setData["time_progress_width"] = Math.ceil(dur_time / total_dur_time)
setData["time_progress_left"] = (s_hour_det_tmp - s_hour_head_tmp) / total_dur_time * 100

// 最后一起把数据一次性 setData 进去
this.setData(setData)

你可能感兴趣的:(微信小程序同一个方法内部多次 setData 无效解决方法)