小程序列表下拉刷新和加载更多

这篇具有很好参考价值的文章主要介绍了小程序列表下拉刷新和加载更多。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

配置

在小程序的app.json中,检查window项目中是否已经加入了"enablePullDownRefresh": true,这个用来开启下拉刷新

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "洛塔",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },

样式

直接引入weui

@import "/pages/style/weui.wxss";

布局

上方两个查询条件和一个按钮,下方显示列表
小程序列表下拉刷新和加载更多,2024 公众号小程序,小程序,列表,加载更多,下拉刷新

<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input name="shipName" class="weui-input" auto-focus placeholder="请输入船名,中英文均可"/>
        </view>
        <view class="weui-cell weui-cell_input">
          <input name="voyage" class="weui-input" placeholder="请输入航次号"/>
        </view>
    </view>
    <button type="primary" formType="submit" style="width:100%;margin-top: 10px;">查询船动态</button>
    </form>

    <view style="margin-top:10px; padding:10px; background:#eeeeee;" wx:for="{{list}}" wx:key="key">
    <view>
      <text style="font-size: 14px;"> 英文船名: {{item.shipNameEn}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 中文船名: {{item.shipNameCn}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 航次: {{item.voyage}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 码头: {{item.wharf}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 类型: {{item.type}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 开港时间: {{item.startTime}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 截关时间: {{item.endTime}}</text>
    </view>


    </view>

  </view>
</view>

逻辑

data中定义几个参数,分别对应请求参数和返回结果。

  data: {
    page:1,
    total:0,
    shipName:'',
    voyage:'',
    list:[]
  },

定义一个公共的请求方法,用来调用接口,加载更多、下来刷新、点击查询等,都调用这个方法

    getListInfo:function() {
      var url = 'https://eladmin.luotayixing.com/api/yzt/time?pageNumber=' + this.data.page +'&pageSize=10&shipName=' + this.data.shipName + '&voyage=' + this.data.voyage;
      var that = this;
      wx.showLoading({
        title: '加载中',
      })
      wx.request({
        url: url,
        success (res) {
          wx.hideLoading();
          if(that.data.page == 1) {
            that.setData({
              list: res.data.data.data
            })
          } else {
            var itemList = that.data.list;
            that.setData({
              list: itemList.concat(res.data.data.data)
            })
          } 
          that.setData({page: that.data.page+1});
          that.setData({total:res.data.data.total});
        },
        fail: function (res) {
          wx.hideLoading()
        }
      })
    },

点击查询按钮,直接调用上面的方法

    formSubmit(e) {
      this.setData({
        shipName:e.detail.value.shipName,
        voyage:e.detail.value.voyage,
        page:1
      });
      this.getListInfo();
    },

用户下拉刷新,需要把页码设置成1,然后调用方法

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
      this.setData({page:1});
      this.getListInfo();
    },

加载更多,需要判断下是不是还有数据。

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
      if (this.data.list.length != this.total) {
        this.getListInfo();
      } else {
        wx.showToast({
          title: '没有更多数据',
        })
      }
    },

以上就是全部逻辑了,完整的js文件如下:文章来源地址https://www.toymoban.com/news/detail-828106.html

Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    page:1,
    total:0,
    shipName:'',
    voyage:'',
    list:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getListInfo:function() {
      var url = 'https://eladmin.luotayixing.com/api/yzt/time?pageNumber=' + this.data.page +'&pageSize=10&shipName=' + this.data.shipName + '&voyage=' + this.data.voyage;
      var that = this;
      wx.showLoading({
        title: '加载中',
      })
      wx.request({
        url: url,
        success (res) {
          wx.hideLoading();
          if(that.data.page == 1) {
            that.setData({
              list: res.data.data.data
            })
          } else {
            var itemList = that.data.list;
            that.setData({
              list: itemList.concat(res.data.data.data)
            })
          } 
          that.setData({page: that.data.page+1});
          that.setData({total:res.data.data.total});
        },
        fail: function (res) {
          wx.hideLoading()
        }
      })
    },
    formSubmit(e) {
      this.setData({
        shipName:e.detail.value.shipName,
        voyage:e.detail.value.voyage,
        page:1
      });
      this.getListInfo();
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
      this.setData({page:1});
      this.getListInfo();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
      if (this.data.list.length != this.total) {
        this.getListInfo();
      } else {
        wx.showToast({
          title: '没有更多数据',
        })
      }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
  }
})

到了这里,关于小程序列表下拉刷新和加载更多的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Paging3分页+ConcatAdapter+空数据视图+下拉刷新(SwipeRefreshLayout)+加载更多+错误重试 (示例)

    paging 库,目前还是有点小bug ,后面说 布局文件就是显示两个TextView,就不贴了 布局文件: adapter 实现: adapter 继承自 LoadStateAdapter,关联的数据对象 LoadState 有三个状态。 LoadState.NotLoading 表示 非加载中,即加载完成时的状态。如果 displayLoadStateAsItem()中的实现是 || (loadState

    2024年02月14日
    浏览(45)
  • 【Python】序列类型①-列表

    序列是一块用来存放多个值的内存空间.Python中常用的数据结构有列表,元组,字典,字符串,集合等. 本篇文章主要讲解列表的常见操作. 列表是python中内置的 可变序列 ,是包含若干元素的有序连续内存空间 所有的元素存放在 [] 中 元素之间用逗号隔开 列表的定义有两种方式: 使用

    2024年02月02日
    浏览(37)
  • 第二章Python序列-列表

    (1)直接将一个列表对象赋给变量 (2)用list()将其他类型转化为列表 双向索引 (1)访问:通过索引 (2)通过for语句 修改 (1)运算符 +(合并列表,生成一个新列表) +=(合并列表,原地操作) * (列表元素重复) (2)append()方法 语法:append(object) (3)指定位置添加 insert

    2023年04月11日
    浏览(46)
  • 【python进阶】列表排序已经掌握?这种将变量插入列表序列的方法你该知道了

    🙋‍♂️作者简介:生鱼同学,大数据科学与技术专业硕士在读👨‍🎓,曾获得华为杯数学建模国家二等奖🏆,MathorCup 数学建模竞赛国家二等奖🏅,亚太数学建模国家二等奖🏅。 ✍️研究方向:复杂网络科学 🏆兴趣方向:利用python进行数据分析与机器学习,数学建模竞

    2023年04月08日
    浏览(43)
  • python经典有序序列的list列表推导式

    生成一个数据列表 使用列表推导式生成该数据列表 分析: 1、使用一行代码的列表推导式就完成了该列表的生成 2、[i for i in range(20)],第一个i元素代表向列表list_2中添加的元素 3、[i for i in range(20)],第二个i元素代表for循环遍历的i元素 使用列表推导式生成只有偶数的数据列

    2024年02月02日
    浏览(59)
  • uniapp小程序如何通过虚拟列表配合节流,完成上拉刷新下拉加载,避免页面卡顿,提升性能呢?

    本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题。 一、虚拟列表 在uniapp小程序开发中,当我们需要渲染大量列表数据时,很容易出现页面卡顿现象。这时候,我们可以使用虚拟列表技术来

    2024年02月11日
    浏览(47)
  • 【Python 笔记(二)——基本语句 变量类型 字符串 序列 列表与元组 字典与集合】

    在 Python 中,基本语句可以帮助我们完成一些基本的操作,如控制流程、定义函数等。以下是 Python 中的几种基本语句: if 语句 if 语句用于判断某个条件是否成立,如果条件成立则执行相应的代码块。 for 语句 for 语句用于遍历序列中的元素,依次执行相应的代码块。 while 语

    2024年02月08日
    浏览(50)
  • 微信小程序-上拉加载更多和下拉刷新

    页面配置文件中配置 \\\"enablePullDownRefresh\\\": true 开启下拉刷新 设置 onPullDownRefresh 方法 在用户下拉时会调用 onPullDownRefresh 方法 在完成后需要调用 wx.stopPullDownRefresh() 关闭刷新状态 可以在页面配置文件中配置 \\\"onReachBottomDistance\\\":50 来设置触发上拉加载的距离,单位为 px 。 默认:

    2024年02月15日
    浏览(44)
  • flutter开发实战-下拉刷新与上拉加载更多实现

    flutter开发实战-下拉刷新与上拉加载更多实现 在开发中经常遇到列表需要下拉刷新与上拉加载更多,这里使用EasyRefresh,版本是3.3.2+1 EasyRefresh可以在Flutter应用程序上轻松实现下拉刷新和上拉加载。它几乎支持所有Flutter Scrollable小部件。它的功能与安卓的SmartRefreshLayout非常相似

    2024年02月07日
    浏览(44)
  • 学习微信小程序的下拉刷新和上拉加载更多

    好的,下面我将为你详细介绍微信小程序中的下拉刷新和上拉加载更多功能,并提供代码案例。 下拉刷新功能 下拉刷新是指当用户在小程序页面下拉时,页面可以重新加载最新的数据。为了实现下拉刷新功能,我们需要使用小程序提供的 onPullDownRefresh 生命周期函数。 以一个

    2024年04月14日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包