随机颜色

  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
}

随机颜色,加载loading效果,节流,应用周期函数,wxs的更多相关文章

  1. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  2. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

  3. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

  4. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  5. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. 谈谈加载(Loading)的那点事

    谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...

  7. 加载动画效果 HTML+ CSS

    加载动画效果 写在前面 在无限的时间的河流里,人生仅仅是微小又微小的波浪.--郭小川 实现效果 实现原理 通过2个伪元素来设置3条颜色边框 通过定位将3个圆弧边框层叠再一起,再通过旋转实现一个圆的效果 ...

  8. Ladda – 把加载提示效果集成到按钮中,提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  9. angular $http 请求数据的时候加载loading

    1.目录结构 2.页面加载时效果(加载的时候比较难截图,是页面上方出现一条进度条,然后我另加了一个Loading..的提示,请忽略那个table) 3.页面加载完成后效果 4.index.html & ...

  10. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

随机推荐

  1. 未授权访问漏洞之Redis漏洞复现

    前言 未授权访问漏洞简写是SSRF(Server-Side Request Forgery:服务器端请求伪造),是一种服务器端提供了可以从其他服务器获取资源和数据的功能,但没有对目标地址进行过滤和限制 ...

  2. 使用IDEA创建一个maven的web项目并部署到tomcat上

    目录 1.创建一个maven项目 2.为项目添加配置文件 3.创建一些类和jsp页面 4.将项目部署到tomcat 1.创建一个maven项目 打开IDEA,File--New--Project 选择 ...

  3. [编程基础] C++多线程入门3-小心地将参数传递给线程

    原始C++标准仅支持单线程编程.新的C++标准(称为c++11或c++0x)于2011年发布.在c++11中,引入了新的线程库.因此运行本文程序需要C++至少符合c++11标准. 文章目录 3 小心地 ...

  4. Raft一致性共识算法论文学习

    论文地址:https://pdos.csail.mit.edu/6.824/papers/raft-extended.pdf 看完raft共识算法,脑袋非常懵,所以写一篇学习笔记,记录一下. raft ...

  5. 02-RTL代码分析思路

    RTL代码分析思路(这里不进行具体代码的分析) verilog文件是以.v结尾的 1 RTL代码示例 //Date : 2023-01-09 //E-mail : xxxxxx@163.com //c ...

  6. Vue+elementui前后端分离,单个图片文件上传和上传时出现的跨域问题的解决方案

    在后端解决跨域问题: 我是通过配置文件来解决跨域问题的 @Configurationpublic class CorsConfig {//解决前后端分离的跨域问题! /** * cors suppor ...

  7. 使用iframe引入文件后设置响应式宽高以及其他问题解决;

    第一 :引入iframe后背景色解决: 需要先设置 被引入文件的body样式 第二:滚动以及其他样式需要设置,span是为了小屏准备的,处理小屏时候元素距离顶部高度问题: 这个是span 的样式 然后 ...

  8. JVM是如何解决跨代引用问题的?

    本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 CSDN: 码农BookSea 不知道自己的无知,乃是双倍的无知.--柏拉图 目录 跨代引用问题 记忆集 卡表 写屏障 ...

  9. 扒一扒Bean注入到Spring的那些姿势,你会几种?

    大家好,我是三友~~ 这篇文章我准备来扒一扒Bean注入到Spring的那些姿势. 其实关于Bean注入Spring容器的方式网上也有很多相关文章,但是很多文章可能会存在以下常见的问题 注入方式总结的 ...

  10. Function接口-默认方法:andThen

    Function接口 java.util.function.Function<T,R〉接口用来根据一个类型的数据得到另一个类型的数据,前者称为前置条件,后者称为后置条件. 抽象方法:apply ...