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

    万次阅读 2018-08-20 17:56:53
     一开始用的是scroll-view组件,但是真机运用的时候发现上拉加载更多的时候,数据有跳动,对用户交互及其不友好,所以决定修改上拉加载更多的效果  我用的是wepy框架,参照多个网上文档,也参照官方文档主要用的...

    一、代码环境

            一开始用的是scroll-view组件,但是真机运用的时候发现上拉加载更多的时候,数据有跳动,对用户交互及其不友好,所以决定修改上拉加载更多的效果

            我用的是wepy框架,参照多个网上文档,也参照官方文档主要用的是onReachBottom()事件

    二、代码

    视图层:

    <repeat for="{{recordList}}" key="index" index="index" item="item" >
       <view class="zan-panel">
          <view class="zan-cell">
             <view class="zan-cell__bd">变更内容:{{item.typeText}}</view>
             <view class="zan-cell__ft">¥<text style="padding-left:4rpx">{{item.totalFee/100}}</text></view>
          </view>
          <view class="zan-cell">
             <view class="zan-cell__bd zan-font-12 zan-c-gray-dark">变更时间:{{item.updateTime}}</view>
          </view>
       </view>
    </repeat>
    <block wx:if="{{recordList.length > pageSize}}">
       <block wx:if="{{updateLoadShow}}">
          <updateLoad :loading="updateLoadShow"></updateLoad>
       </block>
       <view class="doc-description zan-center" style="font-size:12px;" wx:else>
          <text>{{updateLoadTxt}}</text>
       </view>
    </block>

    说明:如果数据不超过一屏,向上拉回无法触发onReachBottom()事件,所以我做的处理是   “ (当前屏幕高度 实际一个列表循环高度 )+1”,保证数据能超过一屏。

    onLoad() {
        // 获取系统消息
        wepy.getSystemInfo({
          success: (res) => {
            this.height = res.windowHeight
            this.pageSize = Math.round(res.windowHeight / 103) + 1
            this.$apply()
          }
        })
    }

     

    逻辑层写:

    // 上拉加载
    onReachBottom() {
        // 上拉加载更多loading
        this.updateLoadShow = true
        let _length = this.recordList.length
        // 列表长度与列表总数对比
        if (_length === this.pagtotal) {
          setTimeout(() => {
            this.updateLoadShow = false
            this.$apply()
          }, 1000)
        } else {
          // 当前页码加一
          this.pageNum++
          // 更新数据
          this.getData()
        }
    }
    // 获取数据
    getData() {
        const pageNum = this.pageNum
        api.get(recordURL + 'queryBalanceSub?start=' + pageNum + '&size=' + this.pageSize + '&sortStr=update_time&sortType=desc').then(({data}) => {
          if (pageNum === 1) {
            this.recordList = data.list
            this.pagtotal = data.totalRow
          } else {
            this.recordList = this.recordList.concat(data.list)
          }
          this.loadingShow = false
          this.updateLoadShow = false
          this.$apply()
        })
      }

     

    --- 2018-11-23修-----------------------------------------------------------------------------------------------------------

    bug: 第一次下拉不显示‘加载中...’,实际是在数据请求,会延迟几秒显示,或是需要多向上拉几次(具体多久就需要看请求的速度啦)

    解决方案:问题在于在视图层的时候限制了页面显示最大数量,因为视图层加了判断条件“数据列表的长度大于加载数,才显示加载中组件”。现在只需要修改下加载数pageSize-1,那么问题就解决了

    修复后代码:

    展开全文
  • 上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦。但是呢,scroll-view上拉加载会一到底部就不断的触发这个事件,怎么办才能巧妙的解决这个问题呢?问了度娘依旧没有解决...
    来个上拉刷新,解决一下上拉问题。上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦。但是呢,scroll-view上拉加载会一到底部就不断的触发这个事件,怎么办才能巧妙的解决这个问题呢?问了度娘依旧没有解决问题,所以跟小伙伴研究了一下,得到下面方法,希望对小伙伴有用。
    <view class='allOrder'>
        <scroll-view class='scroller' scroll-y style="height:{{scrollHeight}}px;" bindscrolltolower="LoadMore">
            <view class='show-one-order' wx:for="{{list}}" wx:key="{{index}}" data-index='{{index}}' catchtap='getOrderDetail'>
                <!-- 展示一张票的img -->
                <view class='order-one-img'>
                    <image wx:if='{{item.photos[0]}}' src='{{item.photos[0]}}' mode='aspectFill'></image>
                </view>
            </view>
            <view class="nonedata {{noneData== false?'hidden':''}}">没有更多数据了 ~~~</view>
        </scroll-view>
    
    </view>


    js 部分内容

    // 引入请求(已封装好的函数在上一篇博客)
    var util = require('../../../utils/util.js');
    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            flag: 1,//得到转换的数据,1是全部
            scrollHeight: 0,//得到手机屏幕高度
            list: [],//得到列表
            page: 1,//得到当前的页数
            limit: 10,//得到当前的条数
            lastLoadTime: 0,//得到上一次加载的时间
            loadMoreIs: false,//监控是否是下拉加载更多
            noneData: false,//得到是否显示没有更多数据
            totalPage: 0,//得到总的页数
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            var that = this;
            wx.getSystemInfo({
                success: function (res) {
                    var height = res.windowHeight - 54;
                    that.setData({ scrollHeight: height });
                }
            })
            this.getData();//得到相应数据
        },
        getData: function (e) {  
            var dataType = this.data.flag;
            var that = this;
            //数据请求部分
            util.HttpRequst(true, "order/orderList", 1, wx.getStorageSync('sessionId'),{
                "limit": that.data.limit,
                "page": that.data.page,
                "type": dataType
            },"GET" , function (res) {
                if (res.code == 200) {
                    var List = res.content.list;
                    that.setData({ totalPage: res.content.totalPage });
                    if (List.length == 0 || List.length < that.data.limit || (that.data.totalPage == that.data.page && List.length % that.data.limit ==0)) {
                        that.setData({ noneData: true });
                    }
                    if (that.data.loadMoreIs == false) {
                        that.setData({ list: List });
                    } else {
                        var shanList = that.data.list.concat(List);
                        that.setData({ list: shanList });
                    }
                    console.log(res);
                }
            })
        },
        /**
        * 加载更多
        */
        LoadMore: function (e) {
            var that = this;
            var currentTime = e.timeStamp;//得到当前加载的时间
            var lastTime = this.data.lastLoadTime;//得到上一次加载的时间
            if (currentTime - lastTime < 300) {
                console.log("时间间隔太短,不能算下拉加载");
                return;
            }
            var newPage = this.data.page + 1;
            console.log("当前页"+newPage)
            if (that.data.totalPage >= newPage) {
                this.setData({
                    page: newPage,
                    lastLoadTime: e.timeStamp,
                    loadMoreIs: true
                });
                this.getData();  
            }
        },
    })

    最后唠叨一下getData里面包含了下拉加载时候如果遇到加载到最后的情况时显示更多,一并复制粘贴上来了,如不需要可以不看,只看loadMore就好。总结就是拿时间戳来看看是不是多次到底部,多次的话时间点过于断的话将不进行请求

    展开全文
  • 上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来保存加载过的数据(用户看回加载过的数据),同样的每行解析,分类切换的状态显示的想法是慕课网的七月讲师在...

    发现很多人对小程序的文章比较好奇,购物车那篇居然占了快三分一的访问量,因此写多篇关于小程序的常用功能。

    上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来保存加载过的数据(用户看回加载过的数据),同样的每行解析,分类切换的状态显示的想法是慕课网的七月讲师在视频的想法。我这里简化一下。

        data: {
            begin: 0,
            goods_list_key:[]//上拉加载更多初始化
        },
        goodsBegin: function (catId) {//初始化首页商品展示
            var that = this;
            var begin = this.data.begin;//初始化时是零,后面通过上拉会不断叠加
            //console.log(begin);
            wx.request({
                url: 'https://www.xxxxxx/' + begin + '/' + catId,
                method: 'GET', 
                header: { 'content-type': 'application/json' },
                success: function (res) {
                    if(res.data ==""){//没有返回数据时的判断
                        wx.showToast({
                        title: '已加载完所有数据',
                        icon: 'success',
                        duration: 2000
                        })
                        //console.log(res.data);
                    /*
                    that.setData({
                    begin:0                    
                    })
                    */
                    }else{
        var goods_list_key=that.data.goods_list_key;//通过在小程序的data开数组进行保存,数组是专门处理数据保存的方法
        goods_list_key=goods_list_key.concat(res.data);//通过concat来合拼所有数组统一为一个数组
        for(var i=0;i<goods_list_key.length;i++){//对商品的价格进行小数点后两位的保留显示
       var costPrice= parseFloat(goods_list_key[i].costPrice);
       costPrice =costPrice.toFixed(2);
       goods_list_key[i].costPrice=costPrice;
        }
                   that.setData({//赋值
                        goods_list_key: goods_list_key
                    })
                    }
                }
            })
        },
        scrolltolower: function () {//上拉加载事件
            var begin = this.data.begin;//获取记录值,
            begin += 4;//自加
            this.setData({//更新记录值
                begin: begin
            });
            var catId = wx.getStorageSync('catId');//获取用户点击的分类缓存
            this.goodsBegin(catId);//执行加载数据函数
        },
        cateId: function (event) {//用户切换分类时,分类点亮的显示效果,商品显示初始化
            var catId = event.currentTarget.dataset.catId;//获取传过来的分类id
            wx.setStorageSync('catId', catId);//记录缓存。用于上拉加载事件用
            var catIds=new Array;//开数组对象
            catIds[catId]=true;//将获取的分类id记录到数组,并赋予状态
            this.setData({//将begin设回为0
            catIds:catIds,
            goods_list_key:[],//重置商品保存数组
            begin:0//初始化记录值
            });
            //wx.setStorageSync('catIds',catIds);
            this.goodsBegin(catId);//执行加载数据函数说
        }


    展开全文
  • 小程序上拉加载更多数据

    千次阅读 2019-01-02 18:01:43
    本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手 首先是页面.wxml代码 &lt;!--上拉刷新加载--&gt; &lt;page&gt; ...

    本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手

    首先是页面.wxml代码

    <!--上拉刷新加载-->
    <page>
      <view class="item" wx:for="{{shujulist}}">
          <view class="text">
            <text class="title">{{item.id}}</text>
            <text class="description">{{item.name}}</text>
          </view>
      </view>
    </page>
    

    接下来是.json代码

    {
      "enablePullDownRefresh": true,//这个是上拉下拉刷新设置的,不加这个默认不会刷新上拉下拉刷新的
      "onReachBottomDistance": 0//这个是距离多远触发上面那个设置
    }

    最后是.js代码了

    //定义全局变量
    var url = "http://192.168.0.125:99/admin/Index/shuju";
    var page = 0;
    
    //定义一个数组,这个数组写在data里面,用于页面上面的加载
    "shujulist": [],
    
    // 请求数据
    var loadMore = function(that) {
      wx.showLoading({
        title: '玩命加载中',//上拉的时候会出现一个提示框
      })
      wx.request({
        url: url,
        data: {
          page: page
        },
        method: 'POST',
        header: {
          'content-type': 'json'
        },
        success: function(res) {
          console.log(res);
          //注意这个地方,我再上面改成用GET访问数据后,然后这个回调数据就多了一个data,你们自己要多多注意,我也不知道什么问题
          var shujulist = that.data.shujulist;
          for (var i = 0; i < res.data.length; i++) {
            shujulist.push(res.data[i]);
          }
          that.setData({
            shujulist: shujulist
          });
          page++;
          wx.hideLoading();
        }
      });
    }
    
    
    //这个方法写在Page()里面这个是监听屏幕滑到最下面时候的事件
    onReachBottom: function() {
        var that = this;
        loadMore(that);
    }

    最后温馨提醒一下,要把开发工具中的不效验合法域名给勾上,不然访问数据的时候他会一直提示你域名不合法。

    展开全文
  • 微信小程序上拉加载更多数据

    千次阅读 2018-09-06 14:29:39
    data: { curpage: 1, list: null }, onLoad: function() { wx.showLoading(); var _this = this; /**初始化list*/ _this.getAjaxList() .../**上拉动作, push数据*/ onReachBottom: function() { ...
  • /**上拉动作, push数据*/ onReachBottom: function() { console.log(++this.data.curpage); this.getAjaxList(); }, getAjaxList: function() { wx.showLoading({ mask: true //显示触摸蒙层 防止事件穿透触发 ...
  • 近来团队让写一个小程序项目,在写某个模块首页列表时,打算采用分页方式请求后台,下拉加载更多。 用到官方的一个关键标签 scroll-view。 代码如下: 一.在wxml文件中: &lt;view class='tipsbar'&gt...
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是...
  • 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <...
  • 2、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。 注意(小程序官方有说明):上拉加载...
  • 小程序的下拉刷新和上拉加载更多,系统已经提供方法。我这里就是利用系统的方法,用自定义的UI和动画去实现。 第一步 想要利用系统的方法,首先要开启。开启方法:在相应的.json文件里面添加”...
  • 继续小程序之旅,这一次把项目优化了一下布局,不至于那么丑了,然后实现了上拉加载更多,下拉刷新
  • 上拉加载更多: 根据当前页码和总页码进行比较,如果当前页码>=总页码,则不请求数据 每次请求,当前页码+1 发送网络请求,传递当前页码 响应中应该包含获取的数据以及总页码 获取成功后,将获取的数据与...
  • 小程序实现上拉加载更多

    千次阅读 2019-03-18 17:05:58
    思路:上拉加载更多(页面上拉触底事件),就是将新获取的数据追加到data的原始数据中 const app = getApp(); Page({ data: { movieList: [], page: 1//分页标识,第几次下拉 }, onLoad() { var that = this...
  • 网上看了好多,我也参考了好多,不过总结了大家的经验还是做...上拉加载更多下拉刷新前端wxml代码: &lt;view class="page-body"&gt; &lt;navigator url='../info/info?id={{item.id}}' wx...
  • 比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉加载更多的功能。在小程序中,我们可以借助 scroll-view 来实现这个功能,当然也可以使用别的方法来实现...
  • 我们在开发小程序时,一个列表里难免会有很条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。 老规矩,先看效果图 ...
  • uni-app小程序上拉刷新下拉加载更多的浅了解 onReachBottom生命周期(页面上拉触底的处理函数) 准备工作 在 data里面定义好 我们想要的一些属性 page:页数 limit:一页有多少条数据 刚进入页面的时候我们的page...
  • 功能说明:微信小程序 onReachBottom 上拉加载更多 onPullDownRefresh 下拉刷新 实现思路: 1,首次请求获取初始数据以及下一页请求的地址,并将下一页请求地址作为新的接口请求地址; 2,通过新的接口请求地址获取的数据...
  • 之前在做原生app开发的时候,下拉刷新和上拉加载更多是使用的比较多的一个功能了。现在在做微信小程序开发,小程序只提供了下拉刷新的接口。那么下拉刷新和上拉加载更多就需要我们换个思路实现了。关于scroll-view...
  • 效果: 下拉刷新: 问题1:看不到三个点,这个问题通常是背景和那三个点的颜色没设置对造成的 ..."enablePullDownRefresh": true, ...上拉加载更多 设置scroll-view的高度大于屏幕的高度 以iphone6为例:he...
  • 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:...
  • 在安卓环境下,列表快速上拉进行滚动加载更多,会出现卡在低端 不进行加载现象,需要在卡住的位置重新下拉一段距离再重新上拉加载 才可以加载出数据。(慢速上拉是可以正常加载更多数据)。 问题分析: 在父级、...
  • 详情用例看demo,点击下载示例:loadmore 转载于:https://www.cnblogs.com/cisum/p/10430907.html
  • 通过这种方法我们只能在前面获取数据的基础上获取到之后的五条数据,并没有起到上拉加载更多数据的作用,只是起到刷新数据的类似效果。 解决: 我们可以通过concat拼接的方式来实现将前面获取的数据与我们再次刷新...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 574,907
精华内容 229,962
关键字:

小程序上拉加载更多