随机颜色,加载loading效果,节流,应用周期函数,wxs
阅读原文时间:2023年07月10日阅读:1

随机颜色

data: {
colorList:[]
},
getColor(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',

data:res//data重命名为res

success:({data:res})=>{ this.setData({
//旧数据+新数据拼接
colorList:[…this.data.colorList,…res.data]
})
}
})
},

//页面加载时请求一下数据

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

this.getColor()

  },

//上拉触底时再请求一下数据,实现懒加载 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

    this.getColor()

  },

加载

getColor(){
//展示loading效果

wx.showLoading({ title: '数据加载中。。。', })
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:({data:res})=>{
this.setData({
colorList:[…this.data.colorList,…res.data]
})
},
//隐藏loading效果
complete:()
=>
{ wx.hideLoading({})
}
})
},

节流(当前没有任何数据再发起数据的请求)

getColor(){
this.setData({
isloading:true
})
wx.showLoading({
title: '数据加载中。。。',
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'GET',
success:({data:res})=>{
this.setData({
colorList:[…this.data.colorList,…res.data]
})
},
complete:()=>{
wx.hideLoading({})
// 完成以后
this.setData({
isloading:false
})
}
})
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if(this.data.isloading) return
this.getColor()
},

应用周期函数

可对数据进行初始化

/**
* 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
console.log('aa')
},

wxs

页面内部

{{m1.toUpper(username)}}


module.exports.toUpper = function(str){ return str.toUpperCase() }

外联

{{m2.toLower(count)}}

toos.wxs页面
function toLower(str){
return str.tolowCase()
}
module.exports = {
toLower:toLower
}