小程序:下拉刷新,上拉加载

wxml:

<view class=‘view-container‘>
  <block wx:for=‘{{articles}}‘ wx:key=‘{{item.id}}‘>
    <view class=‘articles-container‘>
      <view class=‘info‘>
        <image class=‘avatar‘ src=‘{{item.avatar}}‘></image>{{item.nickname}}
        <text class=‘created-at‘>{{item.created_at}}</text>
        <text class=‘category‘>{{item.category}}</text>
      </view>
    </view>
  </block>
  <view class=‘data-loading‘ hidden=‘{{hidden}}‘>
    数据加载中...
  </view>
</view>

wxss:

.view-container {
  background-color: #fff;
}  

.data-loading {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #eee;
  text-align: center;
  font-size: 14px;
}  

.articles-container {
  border-bottom: 1px solid #eee;
  margin: 30rpx 10rpx;
  background-color: #eee;
}  

.articles-container .info {
  font-size: 12px;
  margin: 20rpx 0rpx;
  height: 100%;
  display: inline-block;
}  

.articles-container .info .avatar {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
  border-radius: 60rpx;
  display: inline-block;
  vertical-align: middle;
}  

.articles-container .info .created-at {
  margin: 0px 20rpx;
  display: inline-block;
  vertical-align: middle;
}  

.articles-container .info .category {
  color: #3399ea;
  display: inline-block;
  vertical-align: middle;
}

js:

Page({

  data: {
    /**
     * 需要访问的url
     */
    urls: [
      ‘https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0‘,
      ‘https://www.csdn.net/api/articles?type=new&category=arch‘,
      ‘https://www.csdn.net/api/articles?type=new&category=ai‘,
      ‘https://www.csdn.net/api/articles?type=new&category=newarticles‘
    ],
    /**
     * 当前访问的url索引
     */
    currentUrlIndex: 0,
    /**
     * 获取到的文章
     */
    articles: [],
    /**
     * 控制上拉到底部时是否出现 "数据加载中..."
     */
    hidden: true,
    /**
     * 数据是否正在加载中,避免数据多次加载
     */
    loadingData: false
  },

  onLoad: function (options) {
    this.loadData(false);
  },

  /**
   * 加载数据
   */
  loadData: function (tail, callback) {
    var that = this,
      urlIndex = that.data.currentUrlIndex;
    wx.request({
      url: that.data.urls[urlIndex],
      success: function (r) {
        var oldArticles = that.data.articles,
          newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
        that.setData({
          articles: newArticles,
          currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
        });
        if (callback) {
          callback();
        }
      },
      error: function (r) {
        console.info(‘error‘, r);
      },
      complete: function () { }
    });
  },

  /**
   * 监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.info(‘onPullDownRefresh‘);
    var loadingData = this.data.loadingData,
      that = this;
    if (loadingData) {
      return;
    }
    // 显示导航条加载动画
    wx.showNavigationBarLoading();
    // 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见
    // wx.showLoading({
    //   title: ‘数据加载中...‘,
    // });
    setTimeout(function () {
      that.loadData(false, () => {
        that.setData({
          loadingData: false
        });
        wx.stopPullDownRefresh();
        // wx.hideLoading();
        wx.hideNavigationBarLoading();
        console.info(‘下拉数据加载完成.‘);
      });
    }, 1000);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.info(‘onReachBottom‘);
    var hidden = this.data.hidden,
      loadingData = this.data.loadingData,
      that = this;
    if (hidden) {
      this.setData({
        hidden: false
      });
      console.info(this.data.hidden);
    }
    if (loadingData) {
      return;
    }
    this.setData({
      loadingData: true
    });
    // 加载数据,模拟耗时操作  

    wx.showLoading({
      title: ‘数据加载中...‘,
    });

    setTimeout(function () {
      that.loadData(true, () => {
        that.setData({
          hidden: true,
          loadingData: false
        });
        wx.hideLoading();
      });
      console.info(‘上拉数据加载完成.‘);
    }, 1000);
  }
})

  

原文地址:https://www.cnblogs.com/jy13638593346/p/11686800.html

时间: 2024-10-02 06:05:34

小程序:下拉刷新,上拉加载的相关文章

最新Android ListView 下拉刷新 上滑加载

开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,之前大家最常用的应该是pull to refresh或它的变种版吧,google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout,地址 这个类的作用就是提供官方的下拉刷新,并且效果相当不错,而上拉加载更多则用我们自定义的listview,也是相当简单. 下拉刷新 简单的介绍下: 首先它是一个viewgroup,但是它只允许有一个子控件,子控件能是任何view,使用的时候,所在

十分钟实现ListView下拉刷新上滑加载更多

说到ListView下拉刷新几乎每个APP都会用到,所以ListView下拉刷新是很重要的,就像ListView优化一样是你必会的东西. ListView实现下拉刷新如果我们开发人员自己编写相对来说比较费事的,当我们使用第三方库之后我们再来开发这个功能就会省事很多.相比与自己实现可以少编写不少代码,Android-PullToRefresh库可以轻松实现ListView的下拉刷新功能. 要使用Android—PullToRefesh库对ListView实现下拉刷新要经过以下几个步骤: 1.下载A

Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/details/78781682 ,这里是看了之后,结合自己实际遇到的问题写的. 首先引入包. //下拉框 implementation 'com.android.support:recyclerview-v7:28.0.0-beta01' implementation 'com.scwang.smar

Android 下拉刷新上拉加载 多种应用场景 超级大放送(上)

转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这里不是介绍怎么去实现下拉刷新上拉加载,而是针对下拉刷新上拉加载常用的一些应用场景就行了一些总结,包含了下拉刷新上拉加载过程中遇到的一些手势冲突问题的解决方法(只能算是抛砖引玉). 去年9月的时候,那时自己正在独立做Android项目.记得刚刚写完那个ListView列表页面(木有下拉刷新,上拉加载)

android 下拉刷新上拉加载更多,高仿ios左滑动删除item,解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

SwipeRefreshLayout+RecyclerView实现下拉刷新上拉自动加载

在实际开发中,为了节省开发周期,下拉刷新上拉加载通常都会采取使用一些第三方库,典型的就是用PullToRefresh,XListView等等,还有就是谷歌推荐的SwipeRefreshLayout,可惜没有上拉加载功能,需要自己去实现一个上拉加载的脚View,再加上现在代替ListView的RecyclerView+CardView使用的频率也是也来也高,不得不说,CardView效果确实很好看,一个一个的小卡片,用户体验好,I like it!!!废话不说了,奔主题!今天也玩了一下SwipeR

Android-PullToRefresh下拉刷新,上拉加载的使用详解

哎,最近事真的是多.没有坚持写博客虽然写得差,但还是得坚持写嘛!废话不多说,进入今天的主题. 在Android开发中下拉刷新,上拉加载这个功能是一般商业应用的App中必不可少的一个功能效果.但是对于新手来说,自定义下拉刷新的ListView可能还是会遇到很多的问题.而对于要快速开发的公司来说,可能时间又比较紧张.那么这时候我们就要用到一个开源控件Android-PullToRefresh了.这个开源控件是一款非常优秀的开源控件,可以直接从Github上下载下来直接使用.下载链接地址:https:

android 安卓 listview 支持下拉刷新 上拉加载更多

[1]重写listView import java.text.SimpleDateFormat; import java.util.Date; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.ViewGrou

带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

转载请注明出处:http://blog.csdn.net/lowprofile_coding/article/details/51321896 一 .前言 最近实在太忙,一个多礼拜没有更新文章了,于是今晚加班加点把demo写出来,现在都12点了才开始写文章. 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中. 2.效果图 3.实现步骤 找一个带上拉刷新下载加载更多的RecyclerView开源库,我们要站在巨人的肩膀上 下载下来自己先运行下demo,然

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr