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

配置

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

bash 复制代码
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "洛塔",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },

样式

直接引入weui

bash 复制代码
@import "/pages/style/weui.wxss";

布局

上方两个查询条件和一个按钮,下方显示列表

bash 复制代码
<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中定义几个参数,分别对应请求参数和返回结果。

bash 复制代码
  data: {
    page:1,
    total:0,
    shipName:'',
    voyage:'',
    list:[]
  },

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

bash 复制代码
    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()
        }
      })
    },

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

bash 复制代码
    formSubmit(e) {
      this.setData({
        shipName:e.detail.value.shipName,
        voyage:e.detail.value.voyage,
        page:1
      });
      this.getListInfo();
    },

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

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

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

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

以上就是全部逻辑了,完整的js文件如下:

bash 复制代码
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 () {

    }
  }
})
相关推荐
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck9 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟11 小时前
小程序跳转另一个小程序
小程序
14 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
18 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji18 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域19 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
说私域20 小时前
传统媒体终端移动化发展新趋势:融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售
DK七七20 小时前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp