小程序下拉刷新样式得到数据后,直接自动滑动到请求得到的数据的第一条的地方,而不是在下拉刷新的地方

小程序 下拉刷新 注意事项 - 简书
小程序 下拉刷新 注意事项
小程序 下拉刷新 注意事项
1.分全局配置和单文件配置,这里主要是介绍单文件配置项目
2.在json里面需要设置参数为:"enablePullDownRefresh": true
这个“true”
然后需要设置背景颜色为 "backgroundTextStyle": "dark"
//如果这个不设置,那么官网这个加载动画的三个小点是看不到的,和背景图颜色一样了。
代码说明:
onPullDownRefresh(){
  console.log('--------下拉刷新-------')
  wx.showNavigationBarLoading() //在标题栏中显示加载
this.getList(); //加载数据列表的函数——建议单独提出来写
getList:function(){
//在请求发送后记住需要关闭加载动画:
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
绿杨堤畔蓼花洲,可爱溪山秀。
烟水茫茫晚凉后,捕鱼舟,冲开万顷玻璃皱。
乱云不收,残霞妆就,一片洞庭秋。
6月30日Demo更新 微信小程序Demo:蒙台梭利幼教 微信小程序Demo:一个时间管理的微信小程序 基于Bmob开发问答小程序Demo实录 微信小程序Demo:Instagram 图片下载 小程序-城市三级联动 微信小程序Demo:小小梦工场(阅读+记事) 微信小程序D...
注:本文转载知乎上的回答 作者:初雪跑狗图 链接:https://www.zhihu.com/question//answer/ 来源:知乎六合 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 微信小程序正式公测,张小...
转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question//answer/ 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 微信小程序正式公测,张小...
哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换了一个命名的方式,把每篇要讲解的主要内容做为标题,这样就方便以后你们忘记知...
“2017 永州首届美食食材博览会”在零陵开幕。本次展会共举办十三天,设置了餐饮食材、当地特产、日杂干货等主题展区,吸引了300余家企业参展,展出产品超过1000余种。为让游客有更好体验,各大厂家在展位上举办了试吃活动,一站式体验、品尝新品食材。 除了诸多新颖食材及...
标题也看得出大概的意思,不知道是我自己有这种感觉还是大多数人都有这样的感觉,在吃别人家的喜糖的时候比吃自己家的要甜的多,猜都不用猜也知道是怎么个回事,吃别人家的喜糖没有那么多的顾虑,没有那么多的烦心,没有那么多的家长里短的事,永远吃的是别人家的一件事,喜事。 下午厂长拿着一...
小 时 侯 小时候历史就是一个故事。 孩子在父母讲述的历史故事中听见英雄的事迹,正义的化身,让孩子觉得历史很有趣。 长大了历史成了一种见识。 伴随孩子的成长,历史对于孩子成了一种增长见识的手段。对于历史热爱的孩子看待世界的角度也有所不同。 长 大 了 工 作 了 工作了历史...
比洗手洗脚洗脸洗澡更为重要的是洗脑
【1110打卡话题】 今天的文章《你真的成熟吗?》你有什么感悟? 成熟 1 今天,Peter老师讲了成熟的三个特点:脱离父母,独立生存;做最好的自己;接纳自己的不足。 2 我觉得,我还不够成熟,我的心像婴幼儿一样幼稚。 昨天晚上,反复地看,携程亲子园虐童事件的视频。我好像就...查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,
在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;
看一下json文件
"enablePullDownRefresh": true,
注意这里的true是布尔型而不是字符;
有同学说设置完之后可以下拉,但是看不到图标;
在app.json中这样设置;
这样下拉之后就可以看到了;
每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数
直接上代码:
page为全局变量,用在在后面的加载请求,这里要跟后端大哥讨论好请求;
// 下拉刷新
onPullDownRefresh: function () {
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that =
wx.request({
url: 'https://xxx/?page=0',
method: "GET",
'content-type': 'application/text'
success: function (res) {
that.setData({
moment: res.data.data
// 设置数组元素
that.setData({
moment: that.data.moment
console.log(that.data.moment);
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
},上拉加载更多:
* 页面上拉触底事件的处理函数
onReachBottom: function () {
var that =
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
page = page + 1;
wx.request({
url: 'https://xxx/?page=' + page,
method: "GET",
// 请求头部
'content-type': 'application/text'
success: function (res) {
// 回调函数
var moment_list = that.data.
for (var i = 0; i & res.data.data. i++) {
moment_list.push(res.data.data[i]);
// 设置数据
that.setData({
moment: that.data.moment
// 隐藏加载框
wx.hideLoading();
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列(18)
在微信小程序上实现下拉刷新、上拉加载的效果
使用系统提供的onPullDownRefresh、onReachBottom这2个事件,
前提需要在app.json或page.json配置文件中设...
微信小程序实战篇-下拉刷新与加载更多
哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
微信小程序-下拉刷新,上拉加载更多
继续小程序之旅,这一次把项目优化了一下布局,不至于那么丑了,然后实现了上拉加载更多,下拉刷新...
微信小程序下拉刷新和上拉加载的实现
有问题可以扫码加我微信,有偿解决问题。承接小程序开发。
微信小程序开发交流qq群
一: 下拉刷新
下拉刷新两个步骤就能实现。
微信小程序下拉刷新上拉加载的两种实现方法
微信小程序下拉刷新上拉加载的两种实现方法,1、利用&onPullDownRefresh&和&onReachBottom&方法实现小程序下拉刷新上拉加载,2、在scroll-view里设定bindscr...
微信小程序开发之下拉刷新 上拉加载
微信小程序中的下拉刷新,上拉加载的功能在所难免,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.
微信小程序开发常用技巧(6)——列表上拉加载更多
微信小程序API提供了监听页面用户下拉刷新事件,但是没有提供上拉监听事件,实际开发过程中经常会用到上拉列表,加载更多的需求。那么如何实现呢?
实现原理:利用onReachBottom监听页面滑动到底...
微信小程序 下拉刷新/上拉加载更多 (上拉加载更多怎么实现)
参考:微信小程序开发文档-&框架&逻辑层-&注册页面
实现原理:
1、下拉刷新:由于小程序数据是实时渲染的...
小程序开发——自定义下拉刷新和上拉加载更多
小程序的下拉刷新和上拉加载更多,系统已经提供方法。我这里就是利用系统的方法,用自定义的UI和动画去实现。
想要利用系统的方法,首先要开启。开启方法:在相应的.json文件里面添加”en...
微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)
利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,...
没有更多推荐了,小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.
原理: scroll-view中有监听滑动的方法,这个跟类似.其中用到了滑动到顶部,滑动到底部的方法.
1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字.
2.上拉加载,在滑动到底部时,bindscrolltolower被调用,我这里是页数加一,根据自己的业务逻辑修改,然后将获取到的集合添加到scroll-view的数据集合里即可.
1.index.js
[javascript]
2.index.wxml
3.index.wxss
http://blog.csdn/qq_
微信小程序下拉刷新/上拉加载更多
查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面...
微信小程序:下拉刷新,上拉加载
下拉刷新和上拉加载是两个独立又联系的功能,下拉刷新除了重新请求服务器数据外还要对之前的状态和页码进行初始化,而上拉加载需要服务器端有分页机制,和内存中数据的添加和页码的对应变化,以及状态的变化。
微信小程序下拉刷新和上拉加载的实现
有问题可以扫码加我微信,有偿解决问题。承接小程序开发。
微信小程序开发交流qq群
一: 下拉刷新
下拉刷新两个步骤就能实现。
微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
上拉加载(分页加载)
当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
微信小程序分页加载
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验。那么今天的这篇文章就是介绍微信小程序...
微信小程序实现列表上拉加载,自动适应屏幕
1.视图层wxml
微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载
样式基于weui
首先需要配置页面的json文件,启用下拉刷新
&enablePullDownRefresh&: true
在WXML里,通...
微信小程序 绑定列表数据 分页
这篇文章主要介绍了微信小程序 实现列表刷新的实例详解的相关资料,这里提供了实现代码及实现效果图,需要的朋友可以参考下
微信小程序 列表刷新:
微信小程序,最近自己学习微信小程...
微信小程序(六):列表上拉加载下拉刷新
本文讲在微信小程序中如何以列表的形式展示数据,并添加上拉加载下拉刷新功能...
没有更多推荐了,}

我要回帖

更多关于 小程序下拉刷新动画 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信