随机颜色，加载loading效果，节流，应用周期函数，wxs

随机颜色

  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

页面内部

<view>{{m1.toUpper(username)}}</view>
<!-- 上拉触底 -->
<wxs module="m1">
module.exports.toUpper = function(str){
  return str.toUpperCase()
}
</wxs>

外联

<view>{{m2.toLower(count)}}</view>
<wxs module="m2" src="../../utils/toos.wxs"></wxs>



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