微信小程序上拉加载和下拉刷新(wepy)

这篇随笔主要是记录在用wepy写小程序下拉刷新和上拉加载功能时遇到的数据显示不完全的问题及解决方法。

网上很多关于小程序的上拉加载和下拉刷新的文章的实现方法,无非两种,一是用scroll-view组件,另一种则是使用onReachBottom()和onPullDownRefresh()两个页面事件处理函数。

scroll-view实现不好的是不能使用onPullDownRefresh,只能检测滚动到顶部触发刷新或者其它动画操作,以及在其内部使用textareamapcanvasvideo等组件会有各种不适。

所以,最理想的方法是检测onReachBottom来进行更多数据加载和改变加载动画,检测onPullDownReFresh进行数据更新(官方支持动画)。

方案一(scroll-view):

<scroll-view @scroll="handleScroll"
              @scrolltoupper="upper"
              @scrolltolower="loadMore"
              scroll-top="{{scrollTop}}"
              scroll-y
              scroll-with-animation="{{true}}"
              style="height: 100%;">
  <view wx:for="{{data}}" wx:key="{{index}}">
    <!--复杂的内容条目-->
  </view>
  <!--加载动画&提示切换-->
  <view>
    <view hidden="{{!hasNext}}"></view>
    <view>{{hasNext?‘正在加载‘:‘无更多数据‘}}</view>
  </view>
</scroll-view>

  

这个方案如果不要求有下拉动画是挺好的,至少数据渲染时正常。

方案二(page页面事件函数):

   <view wx:for="{{dataList}}"
          wx:key="{{index}}">
      <!--复杂内容填充-->
    </view>
    <view  wx:if="{{hasNext}}" style="padding: 5px;text-align: center">
      正在加载
    </view>

  相关方法:

    onPullDownRefresh() {
      //请求数据更新
    }
    onReachBottom(event) {
      //请求更多数据
    }

  上面这样子是渲染正常的,但如果“正在加载”换成方案一那种较复杂的判断,在安卓下则会出现渲染不完全。查看元素是已经渲染的了,可是就是有半截没显示,由于用的是wepy所以不确定是小程序本身问题,还是wepy 脏检的问题。后续再写原生测下。

  注意:用方案二可能ios下会滚动卡顿的问题,参考:微信小程序ios端overflow:auto滚动卡顿

原文地址:https://www.cnblogs.com/fiy-noob/p/9188844.html

时间: 2024-10-05 05:12:03

微信小程序上拉加载和下拉刷新(wepy)的相关文章

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div> 3.js

你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题

前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等需求问题,现将问题解决中用到的五大开源项目总结下来,方便他人. 首先介绍下RecyclerView,RecyclerView相比ListView增加了很多新特性: ? Adapter中的ViewHolder模式 - 对于ListView来说,通过创建ViewHolder来提升性能并不是必须的.因为L

ListView上拉加载和下拉刷新多种实现方式

ListView上拉加载和下拉刷新多种实现方式 该篇为ListView下拉刷新和上拉加载实现的各种方法大合集.可能在具体的细节逻辑上处理不太到位,但基本上完成逻辑的实现.细节方面,个人可以根据自己的需求进行完善. 该博客将以四种思路来完成下拉刷新和上拉加载 自定义View实现上拉加载和下拉刷新 使用PullToRefresh 实现上拉加载和下拉刷新 使用Ultra-Pull-To-Refresh实现上拉加载和下拉刷新 使用SwipeToRefreshLayout实现上拉加载和下拉刷新 如果你对L

Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题

所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

读取网上gson数据,展示到gridview上,然后上拉加载,下拉刷新

NetWorkUtil.class package com.example.liangminghui20160425; import java.io.IOException; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.client.ClientProtocolException; import org.apache.http.client.HttpC

定位和xml解析和gson解析加上拉加载,下拉刷新

这里的上拉加载,下拉刷新用到是依赖包 Mainactivity,xml解析和定位 package com.exmple.autolayout; import java.util.List; import android.content.Intent; import android.os.AsyncTask; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; i

vue-上拉加载、下拉刷新组件

vue在移动端开发过程中,上拉加载.下拉刷新是页面的基本需求,现在给大家介绍一种基于touch事件封装的刷新组件. 组件支持传参.传递事件.请求成功异步回调.上拉与触底触发加载或刷新. 父子组件间的通信 这里我们有两个页面,父组件note.vue与刷新组件baseScroll.vue. 通过Prop向子组件传递数据.通过事件向父组件发送消息.通过插槽slot分发内容. note: <base-scroll v-bind:url="url" v-bind:param="p

18.小程序上拉加载和下拉刷新

在微信小程序上实现下拉刷新.上拉加载的效果 使用系统提供的onPullDownRefresh.onReachBottom这2个事件, 前提需要在app.json或page.json配置文件中设置,才能使用. app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用. 示例: app.json: 在app.json文件里设置window属性 page.json: 在page.json文件里直接设置属性 示例: 结合导航栏loading显示正在加载的效果 Page