微信小程序显示分页列表

目录

微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告

最终效果可扫码查看

遇到问题可通过公众号留言反馈

概述

列表滑动到最底端的时候，请求更多数据并展示。
展示样式：

技术总结

1. 开启加载更多的支持app.json增加"enablePullDownRefresh": true
2. 数据到底的调用方法onReachBottom
3. 如果使用了form表单，多个输入框至多只能有一个auto-focus

样式

偷懒进行中，继续使用之前已经导入的

@import "../index/weui.wxss";

流程

首先修改app.json，window中增加"enablePullDownRefresh": true，完整的：

{
  "pages": [
    "pages/ship/ship",
    "pages/time/time",
    "pages/index/index",
    "pages/more/more",
    "pages/logs/logs",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "洛塔",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#00bfff",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/home2.png",
        "iconPath": "images/home1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/more2.png",
        "iconPath": "images/more1.png",
        "pagePath": "pages/more/more",
        "text": "功能中心"
      },
      {
        "selectedIconPath": "images/mine2.png",
        "iconPath": "images/mine1.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

回到当前的js文件，因为后台接口返回的数据中有total字段，表示全部记录的条数，所以可以据此判断是不是到了最后一页。如果是最后一页则停止加载更多。
测试的数据接口为：http://yr.lootaa.com/ship/time/yyjg?page=1&size=10&shipName=&voyage=

// pages/ship/ship.js
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  getListInfo:function() {
    var url = 'http://yr.lootaa.com/ship/time/yyjg?page=' + this.data.page +'&size=10&shipName=' + this.data.shipName + '&voyage=' + this.data.voyage;
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: url,
      success (res) {
        wx.hideLoading();
        console.log(that.data.page)
        if(that.data.page == 1) {
          that.setData({
            list: res.data.data.data
          })
        } else {
          var itemList = that.data.list;
          console.log(res.data.data.data)
          that.setData({
            list: itemList.concat(res.data.data.data)
          })
        } 
        that.setData({page: that.data.page+1});
        that.setData({total:res.data.data.total});
        console.log(res.data.data.data)
      },
      fail: function (res) {
        wx.hideLoading()
      }
    })
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

布局

<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.startTime}}</text>
    </view>
    <view>
      <text style="font-size: 14px;"> 截关时间： {{item.endTime}}</text>
    </view>


    </view>

  </view>
</view>