精华内容
下载资源
问答
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    } }) }, 上拉加载更多: /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { var that = this; // 显示加载图标 wx.showLoading({ title: '玩命加载中', }) // 页数+1 page = page + 1; wx.request...

    查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    看一下json文件

     

    "enablePullDownRefresh": true,


    注意这里的true是布尔型而不是字符;

     

    有同学说设置完之后可以下拉,但是看不到图标;

    在app.json中这样设置;

    这样下拉之后就可以看到了;

    每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

    直接上代码:

    page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;

     

     // 下拉刷新
      onPullDownRefresh: function () {
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        var that = this;
        wx.request({
          url: 'https://xxx/?page=0',
          method: "GET",
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            that.setData({
              moment: res.data.data
            });
            console.log(that.data.moment);
            // 隐藏导航栏加载框
            wx.hideNavigationBarLoading();
            // 停止下拉动作
            wx.stopPullDownRefresh();
          }
        })
      },

     

    上拉加载更多:

     

     

    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var that = this;
        // 显示加载图标
        wx.showLoading({
          title: '玩命加载中',
        })
        // 页数+1
        page = page + 1;
        wx.request({
          url: 'https://xxx/?page=' + page,
          method: "GET",
          // 请求头部
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            // 回调函数
            var moment_list = that.data.moment;
            const oldData = that.data.moment;
            that.setData({
               moment:oldData.concat(res.data.data)
            })
            // 隐藏加载框
            wx.hideLoading();
          }
        })
    
      },

    完成。

    推荐一下自己的小程序 有兴趣可以交流

     



     

     

    展开全文
  • vue vant框架上拉加载效果,list列表上拉加载重复加载问题。 如果上拉一次出现了加载几次的情况: 一、注意this.loading=false;设置是否正确; 二、每次加载的数据条数给多一点。 //html <van-list v-model=...

    vue vant框架上拉加载效果,list列表上拉加载重复加载问题。
    如果上拉一次出现了加载几次的情况:
    一、注意this.loading=false;设置是否正确;
    二、每次加载的数据条数给多一点。

    //html
    <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          error-text="请求失败,点击重新加载"
          @load="onLoad"
          :immediate-check="false"
        >
        </van-list>
        //methods
    onLoad() {
    //加个延迟可以短暂看到加载中,体验好一点, 不然太快了有点感觉不到是上拉加载
    //这里不能写this.loading=false;不然每一次下拉会重复加载
          setTimeout(() => {
            this.home_info_pay();
          }, 1000);
    
        },
    home_info_pay(){
          var self = this;
          axios({
            method:'get',
            url:'/api/home/index/index_paylist',
            params:{
              'start':self.start,//第几次加载传到后台,让后台知道从哪一条数据开始
            },
            headers:{
              'XX-Token':ses.login
            }
          }).then(function(res){
            console.log(res);
            if (res.data.code==1) {
              if(res.data.data.length==0){
                self.finished = true;
                return false;
              }
              for(var i in res.data.data){
                self.homeinfo.payData.push(res.data.data[i]);
              }
              self.start +=1;
              console.log(self.start);
              self.loading=false; //加载完成才设置false,让其可以执行下一次加载
            }else{
              vant.Dialog({message: res.data.msg});
            }
          });
        },
    
    展开全文
  • AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据。...

    AngularJS上拉加载问题解决方法

          项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据。但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果。

    图1 客户端搜索栏

     

    图2 服务端控制台

          可以断定是客户端的业务逻辑出现了问题。返回到客户端,查看源码逻辑,修改如下:

          控制器

     

    $scope.medsearchMore = function() {
    console.log("上拉加载....." + isfinished);
    if (isfinished == 0) {
    begno += pcnt;
    var data = {
    "begno"   : begno,   // 起始序号
    "pagenum" : pagenum, // 每页返回条数
    "searchby": searchby
    };
    if (searchType == 1) {
    data.classid = searchKey;
    console.log(data.classid); //--------1
    appCallServer($http, "9002", data, function(data) {
    console.log("下拉刷新查询结果rootScope.med:" + JSON.stringify(data.data));
    for (var i = 0; i < data.pcnt; i++) {
    $rootScope.med.push(data.data[i]);
    }
    // 更新状态
    isfinished = data.isfinished;
    // 药品已查询完毕
    if(isfinished == '1'){
    $scope.noMore = true;
    }else{
    $scope.noMore = false;
    }
    pcnt = data.pcnt;
    }, function(data) {
    // 药品已查询完毕
    $scope.noMore = true;
    $ionicLoading.show({
    template: data.errtext
    });
    $timeout(function() {
    $ionicLoading.hide();
    }, 1200);
    });
    }
    } else {
    // 药品已查询完毕
    $scope.noMore = true;
    }
    $timeout(function() {
    $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 1200);
    };

     

          视图

     

    <!--当用户到达页脚或页脚附近时,ion-infinite-scroll指令允许你调用一个函数 。当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite-->
    <!--当没有更多数据加载时,就可以用一个简单的方法阻止无限滚动,那就是angular的ng-if指令-->
    <!--设置noMore初始值为true首次即点击分类查询时不进行下拉加载操作-->
    <ion-infinite-scroll on-infinite="medsearchMore()" distance="0.01%" icon="ion-loading-c"></ion-infinite-scroll>
    <div class="item" ng-if="noMore" align="center"><p>没有更多的药品了</p></div>

     

          经过以上修改,可以实现避免不必要的请求。

    参考文献

    1.http://www.ionic.wang/js_doc-index-id-29.html

    美文美图

     

    展开全文
  • 执行这句会显示没有更多的数据并关闭数据上拉加载的功能. 在自己的需求中需要在下拉刷新后, 将没有更多数据的显示去掉并同时开启上拉加载的功能. 看了很多官网上的例子,然而并没有用. 具体可以在上拉刷新后的...
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); 执行这句会显示没有更多的数据并关闭数据上拉加载的功能.

    在自己的需求中需要在下拉刷新后, 将没有更多数据的显示去掉并同时开启上拉加载的功能.

    看了很多官网上的例子,然而并没有用.

    具体可以在上拉刷新后的最后 加入如下代码:

    mui('#pullrefresh').pullRefresh().disablePullupToRefresh(); // 关闭显示更多的提示
    setTimeout(function () {
        mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
        mui('#pullrefresh').pullRefresh().endPullupToRefresh();
    }, 1000)       //设置1s后执行(需要大于1s)不然就会自动执行一次加载.
    展开全文
  • RecyclerView下拉刷新上拉加载

    热门讨论 2016-03-07 23:12:21
    RecyclerView下拉刷新上拉加载
  • vue上拉加载

    千次阅读 2017-10-17 17:14:57
    vue上拉加载
  • 实现 RecyclerView 上拉加载及自动加载

    千次阅读 2017-12-09 12:58:13
    之前在《一步步打造自己的通用上拉加载布局》(如果没有看过,建议先看下这一篇)写到如何实现一个通用的上拉加载布局,本文将基于此进行扩展,实现 RecyclerView 的上拉加载及自动加载。在之前的《一步步打造自己的...
  • SmartRefreshLayout上拉加载加载网络请求数据后调用封装好的那个方法可以让右边的滑动不重置状态啊 ,我 现在就是每次滑到底部进行上拉加载那个滑动条都会跑到顶部求大神解决
  • uniapp如何实现上拉加载(uniapp懒加载),其实简简单单 不管是微信小程序,app上拉加载功能我感觉用的都是很多的,尤其是电商项目。 文章目录uniapp如何实现上拉加载(uniapp懒加载),其实简简单单第一步开启上拉...
  • 仿淘宝上拉加载更多

    热门讨论 2015-06-04 10:13:47
    仿淘宝上拉加载更多,仿淘宝上拉加载更多,仿淘宝上拉加载更多
  • 一、上拉加载配置 1:json文件配置 "onReachBottomDistance":50 { "usingComponents": {}, "navigationBarTitleText": "考勤记录", "enablePullDownRefresh": true, "onReachBottomDistance": 50 } 2:js...
  • ListView上拉加载

    2016-07-31 23:36:33
    ListView上拉加载
  • 前言无限上拉加载更多,在很多场景都有使用,无论是PC还是移动端,尤其是移动端,都应用非常广泛,比如掘金、头条等。 都知道,无论是下拉,亦或是上拉,都是基于滚动条的位置而言的,如果滚动条触底,表示需要加载...
  • 通用版下拉刷新上拉加载大合集demo 源码

    千次下载 热门讨论 2014-08-27 14:41:33
    对所有View通用的下拉刷新上拉加载控件demo大合集。 与此资源对应的博客地址: http://blog.csdn.net/zhongkejingwang/article/details/38868463
  • MUI上拉加载

    千次阅读 2016-07-12 19:09:58
    mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下:  (1)、页面滚动到底,显示“正在加载...”提示(mui框架提供)  (2)、执行加载业务数据逻辑(开发者提供)  (3)、加载完毕,隐藏...
  • ionic上拉加载

    2017-12-14 11:33:20
    ionic上拉加载-爬坑之路 Vue功夫都还不够就又开始学习Ionic了,工作任务也没其他办法了。工作了将近一年,慢慢的领悟到,理解一门技术(语言)的思想,有优秀的逻辑思维比认识一门技术(语言)重要的太多太多。思想...
  • RecyclerView侧滑菜单,RecyclerView滑动删除,RecyclerView长按拖拽,RecyclerView下拉刷新上拉加载 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 RecyclerView侧滑菜单,...
  • IOS上拉刷新及自动加载更多,不需要上拉加载更多,直接就翻到下面就自动加载更多! 喜欢的话到我博客留个言吧,感谢:http://blog.csdn.net/xiaoyuan511 新手,大神勿喷。求共同进步!
  • 这个组件只支持下拉刷新,不支持上拉加载更多的操作,现在我们就来实现它的上拉加载操作。 参考原文地址:http://blog.csdn.net/bboyfeiyu/article/details/39935329?utm_source=tuicool&utm_medium=referral 大家...
  • mui 上拉加载 实现分页加载功能 分页功能(上拉加载): 1、引入需要的css、js文件 <link href="static/css/mui.css" rel="stylesheet" /> <!-- js --> <script src="static/js/jquery-3.2.0....
  • 小程序demo--上拉加载

    2017-03-08 10:39:13
    小程序demo--上拉加载
  • uniapp,上拉加载

    2019-12-24 15:07:04
    今天上拉加载解决方法他来了“一张图搞定它”!!!
  • 参考:微信小程序开发文档-&amp;amp;gt;框架&amp;amp;gt;逻辑层-&amp;...1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现...注意(小程序官方有说明):上拉加载更...
  • 小程序上拉加载功能

    2020-05-29 00:41:29
    小程序上拉加载功能 随着手指向上拉动不断加载更多的数据这种做法在现在的移动端很常见,这种就是接下来要做的上拉加载。这样做可以加快加载速度,按需加载,不用一上来就把所有的数据都请求过来。 做上拉加载之前先...
  • apiCloud 上拉加载

    2018-01-23 09:33:00
    api.addEventListener({ name:'scrolltobottom', extra:{threshold:0} }, function(ret, err){  //上拉加载时需要加载的数据 }); 转载于:https://www.cnblogs.com/gq...
  • RecyclerView的上拉加载功能 自己写了一个单纯的上拉加载功能,适应性好。希望大家多给意见,如有bug及时反馈留言。 核心用法: 1.  xmlns:tools="http://schemas.android.co
  • 纵观多数App,下拉刷新和上拉加载更多是很常见的功能,但是谷歌官方只有一个SwipeRefreshLayout 用来下拉刷新,上拉加载更多还要自己做。 基于RecyclerView 简单封装了这两个操作,下拉刷新支持LinearLayoutManager...
  • 一、页面局部实现上拉加载数据 只有评论区可以上拉加载数据,网上找到了 vue-infinite-scroll 二、使用 官方示例 1、 npm 加载依赖 npm install vue-infinite-scroll --save 2、 单个页面引用 import infinite...
  • ListView的下拉刷新与上拉加载

    千次下载 热门讨论 2014-10-10 17:09:33
    这个Demo实现了ListView的下拉刷新与上拉加载这两个功能,功能基本完善,可以在项目中引用,关于这个自定义的组件,详细请参见:http://blog.csdn.net/allen315410/article/details/39965327
  • 问代码实现了Gridview上拉加载和下拉刷新。本代码主要依托第三的框架,上拉加载和下拉刷新,依托于pulltofresh,对于图片的展示和缓存,则依托于universualImageload.例子已经写好了,代码测试能运行。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,375
精华内容 4,550
关键字:

上拉加载