随机颜色，加载loading效果，节流，应用周期函数，wxs
2024-09-08 18:39:52
随机颜色
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
}
最新文章
- mysql中文乱码问题解决
- java jdbc 连接mysql数据库 实现增删改查
- Spring 中的default-lazy-init="true" 和 lazy-init="true"
- 使用OC语言编写两个超大数相乘或相加的算法的思路和超大正整数相乘的代码
- windows下编译Libevent
- C++: 单例模式和缺陷
- android.util.AndroidRuntimeException: requestFeature() must be called before adding content解决办法
- js调用打印机
- C# 中使用Newtonsoft.Json 处理JSON数据 绝对能用
- crontab的两种配置方式
- 顺序一致性内存模型与JMM的“顺序一致性”
- .net 导入excel数据
- 关闭默认共享，禁止ipc$空连接
- Qt5+MSVC2015编译器编译发布的Release程序运行崩溃，如何查找崩溃的原因？？
- PHP知识点
- 我的vimrc设置
- bzoj1051: [HAOI2006]受欢迎的牛（tarjan板子）
- underscore.js源码解析【'_'对象定义及内部函数】
- sublime格式化js、css、html的通用插件-html js css pretty
- SSH 证书登录（实例详解）