随机颜色

  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. uniapp详细入门教程

    链接:https://www.ruletree.club/archives/2071/ 点击链接查看,内容详细,一学就会哦~! /******** * * .-~~~~~~~~~-._ _.-~~~~ ...

  2. [编程基础] Python模块和包使用笔记

    本文探讨Python模块和Python包,这两种机制有助于模块化编程. 模块化编程是指将大型笨拙的编程任务分解为单独的,较小的,更易于管理的子任务或模块的过程.然后可以像构建模块一样将各个模块拼凑在一 ...

  3. [OpenCV实战]24 使用OpenCV进行曝光融合

    目录 1 什么是曝光融合 2 曝光融合的原理 3 代码与结果 4 参考 本教程中,我们将了解使用OpenCV的Exposure Fusion(曝光融合). 1 什么是曝光融合 曝光融合是一种将使用不同 ...

  4. LeetCode-03 无重复字符的最长子串(Longest Substring Without Repeating Characters)

    题目描述 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 示例  1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 &qu ...

  5. HelloGitHub 最受欢迎的开源项目 Top10(2022年)

    再见 2022,你好 2023! HelloGitHub 也随着 2023 年的到来,更新到了第 81 期 开始迈向第 7 个年头啦. 在过去的 2022 年,我们一共发布了 12 期月刊.分享了 5 ...

  6. MongoDB6.0的安装「2023年」

    你好,我是悦创. 优质原文格式:https://bornforthis.cn/column/crawler/supplement/mongodb-install.html 点进去有惊喜. 吐槽,这篇博 ...

  7. 《STL源码剖析》STL迭代器分类

    input迭代器:只能向前移动,一次一步,用户只能读取,不能修改它们所指向的东西,而且只能读取一次. output迭代器情况类似,但一切只为输出:它们只能向前移动,一次一步,用户只可以修改它们所指向的 ...

  8. LRU 缓存

    力扣题目 146. LRU 缓存 实现 LRU 缓存需要用到哈希链表 LinkedHashMap. LinkedHashMap 是由哈希表和双链表结合而成的,它的结构如下所示. 用自带的 Linked ...

  9. 【Regex】判断密码强度的正则表达式

    原文地址 https://www.cnblogs.com/younShieh/p/17082522.html 如果本文对你有所帮助,不妨点个关注和推荐呀,这是对笔者最大的支持~     需求   最近 ...

  10. 穿透的switch语句-循环概述与基本组成部分

    穿透的switch语句 在switch语句中,如果case的后面不写break,将出现穿透现象,也就是不会在判断下一个case的值,直接向后运 行,直到遇到break,或者整体switch结束. pu ...