微信小程序下拉刷新简单
文章目录
- 实现微信小程序的下拉刷新UI设计
- 一、下拉刷新的实现
- 二、使用步骤
- 1.在Js文件中添加代码:
- 2.实现效果如下
- 总结
实现微信小程序的下拉刷新UI设计
一、下拉刷新的实现
在日常使用中 人们习惯于下拉刷新操作,给出下来刷新的UI界面实现
,后续刷新数据库,请自行探索。
二、使用步骤
1.在Js文件中添加代码:
代码如下(示例):
/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {wx.showNavigationBarLoading() //在标题栏中显示加载setTimeout(function () {wx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新wx.showToast({icon:'none',title: '刷新成功'})//停止下拉刷新}, 500);},
图片如下(示例):
2.实现效果如下
图一下拉(示例):
图二刷新成功(示例):
总结
综上:这里只是给出了刷新的前端实现,具体数据的更新还得另外调用接口 。微信小程序已经封装好了,很多方法,值得我们多学习,多探索。
附上:微信开发文档
微信小程序下拉刷新简单相关推荐
- 微信小程序下拉刷新问题
微信小程序下拉刷新问题 我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
- html下拉刷新原理,微信小程序 下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
- 微信小程序--下拉刷新
实现微信小程序下拉刷新 步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
- 微信小程序下拉刷新和上拉加载
效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...
- ios微信小程序下拉刷新怎么配_为什么他的下拉刷新是个动画效果?
看到别人的下拉刷新动画!是不是蠢蠢欲动!也想马上拥有一个~~ 比如: 再比如: "小二,上菜!" 1 引入下拉刷新组件(组件代码可联系作者获取) 代码: ...
- 微信小程序下拉刷新、上拉加载
微信小程序官方没有给出具体的下拉刷新和上拉加载组件,我们可以基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载.下拉刷新组件. 1. 封装组件 // components/cus ...
- 微信小程序 下拉刷新的实现
本文将简单介绍如何实现微信小程序的下拉刷新 将要使用的api: wx.showNavigationBarLoading(Object object) wx.showLoading(Object obj ...
- 微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
- 微信小程序 下拉刷新页面时的加载状态
案发现场:在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方. 其实三个点是可以看到的.只不过默认是白色的 案例效果 1.在 app.json中 添加样式 "backgroundTe ...
- 微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
最新文章
- LeetCode简单题之比赛中的配对次数
- android倒计时实现方法,Android实现倒计时方法汇总
- iOS开发之Quzrtz2D 一:认识Quzrtz2D
- ubuntu查看默认python版本_ubuntu中修改默认Python版本号
- java请假审批怎么实现_java实现请假时间判断
- 数据要素市场的组织形式和估值框架
- 页面常见跳转的方法和选择
- Spark重要概念提出时间戳和原因
- 古田县争取高速公路的历程
- Axure 9 案例教程基础篇之课程简介(助你快速进入实战阶段)
- Eviews10下载及安装
- order by case when 使用方法
- Linux命令之ss命令
- 内存颗粒位宽和容量_DDR4内存颗粒--美光篇
- 可以弹奏的钢琴页面(HTML实现)
- linux终端打英文间隔太大,解决vs code 内置终端,字体间隔过大问题。(linux centos7成功)...
- 软件架构师的培养与认证
- 【Java爬虫】Jsoup
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
- C语言—字符串与字符数组,字符串数组与字符串指针的区别