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

最终效果可扫码查看

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

概述

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

技术总结

开启加载更多的支持app.json增加"enablePullDownRefresh": true
数据到底的调用方法onReachBottom
如果使用了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>

微信小程序显示分页列表相关推荐

微信小程序新闻信息列表展示
微信小程序信息展示列表 wxml  <view class='haibao' bindtap="seeDetail" id="{ ...
导入微信小程序显示未选择环境或未指定环境，解决办法
导入微信小程序显示未选择环境或未指定环境如下图所示: 解决办法:重新导入,选择云开发(需删掉以前的导入记录) 1.点击云开发申请通过 2.右键cloudfuncrions, 3.点击同步云函数列表 ...
图解微信小程序---获取电影列表
图解微信小程序---获取电影列表代码笔记 list跳转第一步:编写前端页面获取相关的电影列表参数(对于显示参数不熟悉,可以先写js,通过console Log的方式获取我们电影的相关数据字段,后 ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
微信小程序如何实现列表
微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现. 使用「scroll-view」组件:可以使用 wx:for 指令来循环渲染列表中的数据,并为每个元素设置相应的 ...
微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题？...
今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...
微信小程序开发-新闻列表之新闻列表绑定
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
微信小程序快速建立列表
如何在微信小程序中建立列表,并且实现列表项的动态增添,点击某一列表项实现界面的跳转,可以通过navigator组件进行表示. wxml文件 <view class="box" ...

微信小程序显示分页列表

目录

概述

技术总结

样式

流程

布局

微信小程序显示分页列表相关推荐

最新文章

热门文章