微信小程序开发实战(下拉刷新事件应用)
2023-03-14 22:41:58 时间
目录
页面事件
下拉刷新事件
1、什么是下拉刷新
2、启用下拉刷新
3、配置下拉刷新窗口的样式
4、监听页面的下拉刷新事件
5、停止下拉刷新的效果
上拉触底事件
1、什么是上拉触底
2、监听页面的上拉触底事件
3、 配置上拉触底距离
上拉触底小练习
1、案例效果展示
2、案例的实现步骤
添加编译模式
最后
页面事件
下拉刷新事件
1、什么是下拉刷新
下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
2、启用下拉刷新
启用下拉刷新有两种方式:
3、配置下拉刷新窗口的样式
- backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
- backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light
4、监听页面的下拉刷新事件
5、停止下拉刷新的效果
上拉触底事件
1、什么是上拉触底
2、监听页面的上拉触底事件
3、 配置上拉触底距离
如 👇
onReachBottomDistance :150
上拉触底小练习
1、案例效果展示
2、案例的实现步骤
〇 模拟数据data结构
data: { colorList:[], colorArr:[ `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt (Math.random()*100)}`, ]
① 定义获取随机颜色的方法
//获取颜色数据 getColorValue(){ this.setData({ colorList:[...this.data.colorList,...this.data.colorArr], }) // 打印数据 console.log(this.data.colorList); },
② 在页面加载时获取初始数据
/** * 生命周期函数--监听页面加载 */ onLoad(options) { this.getColorValue(); },
③ WXML及WXSS & 渲染 UI 结构并美化页面效果
WXML
<view wx:for="{{colorList}}" wx:key="index" class="colorArr" style="background-color: rgba({{item}});">{{item}}</view>
.colorArr{ border: 1rpx solid red; border-radius: 8rpx; line-height: 200rpx; margin: 15rpx; text-align: center; text-shadow: 0rpx,0rpx,5rpx,red; box-shadow: 3rpx,3rpx,8rpx,red; }
④ 在上拉触底时调用获取随机颜色的方法
/** * 页面上拉触底事件的处理函数 */ onReachBottom() { // 模拟效果 setTimeout(()=>{ //重新加载数据 this.getColorValue(); },1000) },
⑤ 添加 loading 提示效果
/** * 页面上拉触底事件的处理函数 */ onReachBottom() { // 显示加载效果 wx.showLoading({ title: '加载中...', }) // 模拟效果 setTimeout(()=>{ // 隐藏加载效果 wx.hideLoading({}) //重新加载数据 this.getColorValue(); },1000) },
⑥ 对上拉触底进行简单处理节流处理(这里没有使用节流阀直接使用了定时器处理了)
- false 表示当前没有进行任何数据请求
- true 表示当前正在进行数据请求
- 在刚调用 getColors 时将节流阀设置 true
- 在网络请求的 complete 回调函数中,将节流阀重置为 false
- 如果节流阀的值为 true,则阻止当前请求
- 如果节流阀的值为 false,则发起数据请求
添加编译模式
说明:添加了自定义编译模式可以一开始编译时就会自动跳到编译的页面
添加如 👇
最后
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- LibreOffice 7.5 发布:漂亮的新应用图标和酷炫功能
- elementary OS 7 发布
- Windows 应用兼容层 Wine 8.1 发布:默认启用“Windows 10”前缀
- 微软正测试新功能:当 Windows 11 有新的小组件可用时会提醒通知
- 解析分布式存储选型和应用九个典型问题
- ClickHouse在自助行为分析场景的实践应用
- Chrome DevTools 远程调试安卓网页的原理
- Uni-app + Vue3 页面如何跳转及传参?
- 微软证实系统还原点会损坏 Windows 11 22H2 版本应用程序
- 巧用 Transition 实现短视频 APP 点赞动画
- 初学者试试,HarmonyOS应用开发者基础认证
- 媒体实测微软 Windows 开发工具包 2023:存在不兼容 HDR 显示器、某些应用无法运行等问题
- 快速了解Navigator API SetAppBadge
- 微软 Windows 11 Dev 预览版 Build 25276 发布,应用兼容问题对话框 UI 改进
- 基于Next.js、Prisma、Postgres和Fastfy构建全栈APP
- 开始菜单搜索框变圆角,微软 Windows 11 Beta 预览版 22621.1095 和 22623.1095 发布
- 2022-2023 十大应用开发趋势
- 观远数据发布业内首部《移动BI白皮书》,深入业务数字化场景重新定义移动BI
- Windows 10 学院:不借助第三方工具如何卸载 Windows 10 预装应用
- 正处高质量发展期,我国大数据产业突破1.3万亿元