微信小程序之下拉刷新，上拉更多列表实现

最新推荐文章于 2024-03-19 17:44:36 发布
最新推荐文章于 2024-03-19 17:44:36 发布
阅读量479 收藏 1
点赞数
文章标签： 开发工具 json

代码地址如下：
http://www.demodashi.com/demo/11110.html

一、准备工作

首先需要下载小程序开发工具
官方下载地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

目录结构说明

2017-08-11-005837.jpg

二、程序实现

1.运行开发工具

选择「本地小程序项目」
2017-08-10-134943.jpg

2.新建项目

2017-08-10-135152.jpg

3.开启接口域名免校验

2017-08-10-135300.jpg

4.运行效果

2017-08-10-%E6%9C%AA%E5%91%BD%E5%90%8D.gif

三、功能说明

1.通过page方式实现下拉刷新，上拉更多列表

onPullDownRefresh 下拉刷新API

 // 下拉 刷新列表(滚到顶部)
   onPullDownRefresh: function (e) {

      if (!refresh) {
         var that = this;
         refresh = true;

         // 显示刷新动画
         that.setData({
            refreshhidden: false
         })

         wx.request({
            url: 'https://news-at.zhihu.com/api/4/news/latest',
            method: 'get',
            data: {},
            header: { "Content-Type": "application/json" },
            success: function (res) {

               // 数据加载完成后 延迟隐藏loading
               setTimeout(function () {
                  wx.clearStorageSync(); // 清空数据

                  // 重置列表为空
                  that.setData({
                     datalist: []
                  })

                  refresh = false;

                  var arr = res.data;
                  var format = util.getFormatDate(arr.date);
                  arr["dateDay"] = format.dateDay;

                  var list = that.data.datalist;

                  that.setData({
                     datalist: list.concat(arr),
                     dataListDateCurrent: arr.date,
                     dataListDateCount: 1,
                     refreshhidden: false

                  });

               }, 2000);
            }
         });

      } else {
         console.log("正在刷新...");
      }
   },

onReachBottom 滑动到底部API（上拉更多）

 // 上拉 加载更多(滚到底部)
   onReachBottom: function (e) {

      var that = this;

      // 加载更多 loading
      that.setData({
         loadmorehidden: false
      })

      var currentDate = this.data.dataListDateCurrent; // 请求参数：日期

      // 限制加载次数
      if (this.data.dataListDateCount >= 3) {
         that.setData({ // 加载更多 loading
            loadmorehidden: true
         });
      } else {
         // 记录请求日期参数，避免滚动到底部事件，多次触发相同请求
         if (currentDate == wx.getStorageSync("currentDate")) {
            console.log(currentDate + "已发起请求!");
         } else {
            wx.request({
               url: 'https://news-at.zhihu.com/api/4/news/before/' + currentDate,
               method: 'get',
               data: {},
               header: { "Content-Type": "application/json" },
               success: function (res) {

                  var arr = res.data;
                  var format = util.getFormatDate(arr.date);
                  arr["dateDay"] = format.dateDay;

                  var list = that.data.datalist;

                  that.setData({
                     datalist: list.concat(arr),
                     dataListDateCurrent: arr.date,
                     dataListDateCount: that.data.dataListDateCount + 1
                  });
               }
            });
         }
      }
   },
2.结合weui实现加载动画效果

在wxml界面，结合weui加载更多组件，实现加载动画效果

   <!-- 列表 下拉刷新 动画 -->
   <view class="hot-box-top" hidden="{{!refreshhidden}}">
      <view class="weui-loadmore">
         <view class="weui-loading"></view>
         <view class="weui-loadmore__tips">正在刷新...</view>
      </view>
   </view>
   <!-- 列表 上拉加载更多 动画 -->
   <view class="hot-box-more">

      <view wx:if="{{!loadmorehidden}}">
         <view class="weui-loadmore">
            <view class="weui-loading"></view>
            <view class="weui-loadmore__tips">加载更多...</view>
         </view>
      </view>

      <view wx:else>
         <text> 没有更多了 </text>
      </view>

   </view>
3.结合知乎app接口实现数据的动态加载

通过使用知乎API实现动态数据的加载

API1：获取最新 精选 信息列表

1.接口地址
https://news-at.zhihu.com/api/4/news/latest
2.输入参数（无）
3.返回参数

{
  "dateDay" : "08月07日 星期一",
  "top_stories" : [
    {
      "id" : 9560543,
      "title" : "对于嘲讽对手的行为，只能说「电子竞技不相信眼泪」",
      "image" : "https://pic1.zhimg.com/v2-c7a203de0c6a6d451d44ad1a415cc6b0.jpg",
      "type" : 0,
      "ga_prefix" : "080717"
    },
    {
      "id" : 9560143,
      "title" : "知道苹果公司有钱，但没想到美国政府还欠它 526 亿美元",
      "image" : "https://pic2.zhimg.com/v2-0d313023bc8c4b3f2e68ea65aeeebc35.jpg",
      "type" : 0,
      "ga_prefix" : "080713"
    },
    {
      "id" : 9556786,
      "title" : "想要做好尽职调查，必须细致到连企业的厕所也不能放过",
      "image" : "https://pic4.zhimg.com/v2-8efe699a0ad605d935fe53a5d2d3d147.jpg",
      "type" : 0,
      "ga_prefix" : "080711"
    },
    {
      "id" : 9559601,
      "title" : "博尔特在北京奥运的表演仿佛就在昨天，现在已是传奇谢幕",
      "image" : "https://pic2.zhimg.com/v2-49c4ccda5bc1fb4fc10b2529a563e3dd.jpg",
      "type" : 0,
      "ga_prefix" : "080707"
    },
    {
      "id" : 9552053,
      "title" : "满眼二维码，在移动支付上银行已经输了？其实混战才开始",
      "image" : "https://pic1.zhimg.com/v2-04123bb20c6637a15dcd1eac71c4f6e8.jpg",
      "type" : 0,
      "ga_prefix" : "080709"
    }
  ],
  "stories" : [
    {
      "id" : 9560228,
      "title" : "被吓得头皮发麻、脊背发凉……但真的太「爽」了",
      "type" : 0,
      "images" : [
        "https://pic1.zhimg.com/v2-31792fa6be283373ce3b8574940342d8.jpg"
      ],
      "ga_prefix" : "080721"
    },
    
    {
      "id" : 9559747,
      "title" : "「孩子哭别管他，哭累了就睡了」，这种方法真的不行",
      "type" : 0,
      "images" : [
        "https://pic2.zhimg.com/v2-b1f5f7c5384a682fe07dd2a573541bb9.jpg"
      ],
      "ga_prefix" : "080710"
    },
    {
      "id" : 9552053,
      "title" : "满眼二维码，在移动支付上银行已经输了？其实混战才开始",
      "type" : 0,
      "images" : [
        "https://pic3.zhimg.com/v2-c191427cc66d14db722d2875484b362a.jpg"
      ],
      "ga_prefix" : "080709"
    },
    {
      "id" : 9559040,
      "title" : "好好的一个年轻人，怎么就……中了回锅肉的毒",
      "type" : 0,
      "images" : [
        "https://pic2.zhimg.com/v2-67ec769321d8c64e05c9adde287ed711.jpg"
      ],
      "ga_prefix" : "080708"
    },
    {
      "multipic" : true,
      "id" : 9559601,
      "title" : "博尔特在北京奥运的表演仿佛就在昨天，现在已是传奇谢幕",
      "type" : 0,
      "ga_prefix" : "080707",
      "images" : [
        "https://pic4.zhimg.com/v2-676d2821c51bd66f05a1ffcea167fe1b.jpg"
      ]
    },
    {
      "id" : 9558150,
      "title" : "这里是广告 · 蜀道有栈桥何惧上青天",
      "type" : 0,
      "images" : [
        "https://pic1.zhimg.com/v2-4fd0510d4ef0766c07605e1bd3c6bfc4.jpg"
      ],
      "ga_prefix" : "080706"
    }
  ],
  "date" : "20170807"
}
API2:获取历史记录

1.接口地址
https://news-at.zhihu.com/api/4/news/before/20170807
https://news-at.zhihu.com/api/4/news/before/日期
2.输入参数:日期
3.返回参数

{
  "date" : "20170806",
  "stories" : [
    {
      "id" : 9548310,
      "title" : "小事 · 呃……我赢了？",
      "type" : 0,
      "images" : [
        "https://pic4.zhimg.com/v2-ee8be37e57714d08dfb497e72f0288db.jpg"
      ],
      "ga_prefix" : "080622"
    },
    {
      "id" : 9551898,
      "title" : "他的音乐可令时光倒流，五座小金人不足以说明他的成就",
      "type" : 0,
      "images" : [
        "https://pic1.zhimg.com/v2-cdaabf222267bb7162abd089fc45bc24.jpg"
      ],
      "ga_prefix" : "080621"
    },
    {
      "id" : 9549918,
      "title" : "玩了这么多年魔兽，我就是对这个设计有意见",
      "type" : 0,
      "images" : [
        "https://pic4.zhimg.com/v2-02d7621c85df476d6c9e99b07c186883.jpg"
      ],
      "ga_prefix" : "080620"
    }
  ]
}

微信小程序之下拉刷新，上拉更多列表实现

代码地址如下：
http://www.demodashi.com/demo/11110.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权

weixin_34269583
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现列表下拉刷新上拉加载
08-28
主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Taro下拉刷新，上拉加载更多
热门推荐
weixin_42861240的博客
02-21 2万+
效果图： 1、引入插件 import Taro, { Component } from '@tarojs/taro' import { View, Text, ScrollView } from '@tarojs/components' import { AtActivityIndicator } from 'taro-ui' import './index.scss' 2、render (...
taro+react实现下拉刷新,上拉加载，封装scroll-view
最新发布
Will_only_div的博客
03-19 508
1.封装scroll-view,在components下创建scrolldemo文件(名字自定义)下在创建两个文件，一个.jsx,一个.css,我这里用的scss,这里可以根据自己需求来定。到这里scroll-view就封装好了，接下来是在页面中注册引用。在pages文件下创建页面home.jsx。下面是.jsx文件内容。下面是.scss内容。这是home.scss。
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码
08-05
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
08-28
主要介绍了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法,结合实例形式分析了微信小程序列表下拉刷新及上拉加载的相关实现方法与技巧操作,需要的朋友可以参考下
微信小程序之下拉刷新事件、上拉触底事件和案例
哥的时代，为你保驾护航
01-31 2723
一、页面事件 - 下拉刷新事件1、什么是下拉刷新2、启用下拉刷新3、配置下拉刷新窗口的样式4、监听页面的下拉刷新事件5、停止下拉刷新的效果二、页面事件 - 上拉触底事件1、什么是上拉触底2、监听页面的上拉触底事件3、配置上拉触底距离三、页面事件 - 上拉触底案例1、案例的实现步骤2、步骤1 - 定义获取随机颜色的方法3、步骤2 - 在页面加载时获取初始数据4、步骤3 - 渲染 UI 结构并美化页面效果5、步骤4 - 上拉触底时获取随机颜色。
微信小程序开发之下拉刷新 上拉加载(源代码+截图)
06-19
微信小程序开发之下拉刷新 上拉加载(源代码+截图)微信小程序开发之下拉刷新 上拉加载(源代码+截图)微信小程序开发之下拉刷新 上拉加载(源代码+截图)微信小程序开发之下拉刷新 上拉加载(源代码+截图)微信小程序开发之...
详解微信小程序开发之下拉刷新 上拉加载
11-26
微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的...
微信小程序实现页面下拉刷新和上拉加载功能详解
10-17
主要介绍了微信小程序实现页面下拉刷新和上拉加载功能,结合实例形式分析了微信小程序页面下拉刷新和上拉加载相关事件监听与功能实现操作技巧,需要的朋友可以参考下
微信小程序列表的上拉刷新和上拉加载
06-12
微信小程序列表的上拉刷新和上拉加载
几种方法实现下拉刷新，上拉加载
05-02
用Android Studio 实现的3中不同的下拉刷新，上拉加载功能 ListView RecyclerView SwipeRefreshLayout
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）
01-03
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一） 页面缓存的设置优化了页面加载，减少了频繁的调取接口，使用户在断网的情况下有更好的体验。 每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备
微信小程序 下拉刷新及上拉加载原理解析
10-16
主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序列表下拉刷新加载更多
05-04
微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
微信小程序下拉刷新PullDownRefresh的使用方法
10-17
主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序下拉刷新上拉加载组件
01-27
Coolui Scroll v2.0 上拉加载下拉刷新 v2.0 版 上传至npm包可安装下载并npm构建 修改参数配置使组件使用更便捷 增加加载插槽可以自定义加载更多样式 前言 基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：. 只要想法合理立马安排demo~ 演示片段 npm 安装 安装之后开发者工具点击npm构建 npm i coolui-scroller --production 引入 在app.json或index.json中引入组件 "usingComponents": { "coolui-scroll": "coolui-scroller/index", } 示例图片 基础用法 更新日志 基础用法代码演示 页
微信小程序开启上拉刷新
05-23
要开启微信小程序的上拉刷新功能，可以按照以下步骤操作： 1. 在需要开启上拉刷新的页面的`json`文件中添加`enablePullDownRefresh`属性，将其值设置为`true`，例如： ``` { "navigationBarTitleText": "My Page...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值