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

配置

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

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

样式

直接引入weui

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

布局

上方两个查询条件和一个按钮,下方显示列表
在这里插入图片描述

<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文件如下:

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 () {}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/688325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity C#中的封装、继承和多态简单易懂的经典实例

文章目录 封装 (Encapsulation)继承 (Inheritance)多态 (Polymorphism) C#中的封装、继承和多态是面向对象编程&#xff08;OOP&#xff09;的三大核心特性。下面分别对这三个概念进行深入解释&#xff0c;并通过实例来说明它们在实际开发中的应用。 封装 (Encapsulation) 实例…

【北京航空航天大学】【信息网络安全实验】【实验一、密码学:DES+RSA+MD5编程实验】

信息网络安全实验 实验一、DES RSA MD5 一、实验目的 1. 通过对DES算法的代码编写,了解分组密码算法的设计思想和分组密码算法工作模式; 2. 掌握RSA算法的基本原理以及素数判定中的Rabin-Miller测试原理、Montgomery快速模乘(模幂)算法,了解公钥加密体制的优缺点及其常…

gem5学习(21):索引策略——Indexing Policies

目录 一、集合关联&#xff08;Set Associative&#xff09; 二、倾斜关联&#xff08;Skewed Associative&#xff09; 索引策略确定基于地址将一个块映射到哪个位置。 索引策略的最重要方法是getPossibleEntries()和regenerateAddr()&#xff1a; getPossibleEntries()用…

数组转二叉树的一种方法-java(很特殊)

上代码 Node节点的代码 public class ThreadNode {private int data;private ThreadNode left;private boolean leftTag; // 左子节点是否为线索private ThreadNode right;private boolean rightTag; // 右子节点是否为线索// ... 省略get和set方法// ... 省略构造方法// ... …

【MySQL】学习多表查询和笛卡尔积

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-N8PeTKG6uLu4bJuM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

Linux命令-netstat

用于端口和服务之间的故障排除 格式&#xff1a;netstat [常用参数] | grep 端口号/进程名称 -n&#xff1a;显示接口和端口的编号 -t&#xff1a;显示TCP套接字 -u&#xff1a;显示UDP套接字 -l&#xff1a;显示监听中的套接字 -p&#xff1a;显示端口对应的进程信息 -a&a…

一些常见的激活函数介绍

文章目录 激活函数1. sigmoid2. relu3. leakyReLu4. nn.PReLU5. nn.ReLU66. Softplus函数7. softmin, softmax, log softmax8. ELU 激活函数 1. sigmoid https://zhuanlan.zhihu.com/p/172254089 sogmoid函数的梯度范围在 0-0.25&#xff0c; 容易梯度消失 2. relu ReLU激…

1.函数模板基础

1.1函数模板作用&#xff1a; 建立一个通用函数&#xff0c;其函数返回值类型和形参类型可以不具体指定&#xff0c;用一个虚拟的类型来代表&#xff0c;提高复用性 1.2语法&#xff1a; //第一种 template <typename T> 函数声明或定义//第二种 template <class T&…

AI趋势(06) Sora,AI对世界的新理解

说明&#xff1a;使用 黄金圈法则学习和解读Sora&#xff08;what、why、how&#xff09; 1 Sora是什么&#xff1f; 1.1 Sora的基本解读 Sora是OpenAl在2024年2月16日发布的首个文本生成视频模型。该模型能够根据用户输入的文本自动生成长达60秒的1080p复杂场景视频&#xf…

Android稳定性相关知识

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、相关方法论3.1 crash3.2 性能3.3 高…

Python:异常处理

异常处理已经成为判断一门编程语言是否成熟的标准&#xff0c;除传统的像C语言没有提供异常机制之外&#xff0c;目前主流的编程语言如Python、Java、Kotlin等都提供了成熟的异常机制。异常机制可以使程序中的异常处理代码和正常业务代码分离&#xff0c;保证代码更加优雅&…

Linux中MySQL表名与@TableName中大小写关系

在使用SpringBoot时&#xff0c;我们普遍会使用注解&#xff0c;实体类中使用注解TableName指明表&#xff0c;以下是TableName的一些注意事项。 【说明】 在MySQL中&#xff0c;表名的大小写处理与操作系统和数据库服务器的配置有关。MySQL默认是在Linux系统上区分大小写的&…

2024年重磅消息:来自OpenAI发布的视频生成模型Sora

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

Jupyter的全面探索:从入门到高级应用

1. 引言 Jupyter项目的简介 Jupyter项目是一个开源项目&#xff0c;旨在为科学计算、数据分析和教育提供交互式计算和数据科学环境。它允许用户创建和共享包含实时代码、方程、可视化以及叙述性文本的文档&#xff0c;这些文档被称为“笔记本”。Jupyter支持超过40种编程语言…

自然语言编程系列(一):自然语言和程序语言介绍

1.自然语言和程序语言 自然语言和程序语言是两种截然不同但又相互关联的语言体系&#xff0c;它们分别服务于人类日常交流和计算机指令执行。 自然语言&#xff1a; 定义&#xff1a;自然语言是指人类在日常生活中使用的语言&#xff0c;如英语、汉语、法语等。它是非正式且灵…

Java的跨平台特性

Java语言特别流行的其中一个原因就是其具有良好的跨平台性&#xff0c;Java的跨平台性表现在通过 Java 语言编写的应用程序在不同的系统平台上都能够正常运行。其原理是&#xff1a;只要在需要运行 java 应用程序的操作系统上&#xff0c;先安装一个 Java 虚拟机(JVM Java Virt…

html表格标签(下):lable标签,select标签和textara标签

html表格标签(下)&#xff1a;lable标签&#xff0c;select标签和textarea标签 lable标签 搭配 input 使用,点击 label 标签就能选中对应的单选/复选框, 能够提升用户体验。 for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应 (此时点击才是有用的) 运行效果&#x…

信息安全认证 | CISP证书怎么样?值得考吗?

HCIE考证研究所的朋友们&#xff0c;新年快乐&#xff01; 今天给大家说说CISP证书&#xff0c;新的一年祝大家逢考必过啊~ 01 考注册信息安全工程师证书的用处 CISP证书可作为学识和技能证明&#xff1b;求职、任职、晋升、加薪的资格凭证&#xff1b;用人单位招聘、录用劳动…

VueTreeselect 只能选择末级节点

场景&#xff1a;有些需求会要求只能选择末级节点。 解决办法&#xff1a;设置disable-branch-nodes为true。 <treeselectv-model"form.deptIds":options"deptOptions":show-count"true":limit"5"placeholder"请选择部门&quo…

FPGA之移位寄存器

SLICEM中的LUT可以配置为32位移位寄存器,而无需使用slice中可用的触发器。以这种方式使用,每个LUT 可以将串 行数据延迟 1 到 32 个时钟周期。移入D &#xff08;DI1 LUT 引脚&#xff09;和移出 Q31&#xff08;MC31 LUT 引脚&#xff09;线路将LUT级联&#xff0c;以形成更大…