实现uniapp-微信小程序 搜索框+上拉加载+下拉刷新

 

pages.json 中的配置

   {

      "path": "pages/message",

      "style": {

        "navigationBarTitleText": "消息",

        "enablePullDownRefresh": true,

        "onReachBottomDistance": 50

      }

    },

<template><view class="message"><view class="box"><u-searchshape="square":show-action="false"placeholder="请输入标题"height="80"v-model="keyword"@change="keywordChange"></u-search></view><view class="list" v-if="list.length > 0"><view class="list_item" v-for="(item, index) in list" :key="index"><view class="left"><imagev-if="item.status === 1"class="message_icon"src="/static/message.png"></image><imagev-elseclass="message_icon"src="/static/message_icon.png"></image><view class="center"><label class="title">{{ item.title }}</label><label class="time">{{ item.createdAt }}</label></view></view><label @click="handleClick(item)">查看详情</label></view></view><view class="none" v-else><label>暂无消息~</label></view></view>
</template><script>
import { noticeSelect, noticeRead } from '@/api/tabBar.js'
export default {data () {return {isSending: false,keywordId: '',keyword: '',page: {currentPage: 1,pageSize: 20,total: 0},list: [],show: false,token: this.$store.state.user.token || ''}},onShow () {this.token = this.$store.state.user.tokenif (!this.token) {//#ifdef MP-WEIXINuni.reLaunch({url: '/pages/login/index'})//#endif//#ifdef H5|| APP-PLUSuni.navigateTo({url: '/pages/login/index'})//#endifsetTimeout(() => {uni.showToast({title: '请先登录',icon: 'error',duration: 1200})}, 600)return}this.init()},onHide () {this.token = ''this.resetVal()},computed: {// listComputed () {//   return this.list.filter(item => item.title.indexOf(this.keyword) > -1)// }},// 上拉触底时触发onReachBottom () {if (this.page.total === this.list.length) {return uni.showToast({title: '没有更多数据了...'})}if (this.isSending) returnthis.page.currentPage += 1this.init()},// 下拉刷新时触发onPullDownRefresh () {// 重置数据this.resetVal()// 重新请求this.init(true)},methods: {async handleClick (item) {await noticeRead(item.id)uni.setStorageSync('messageItem', JSON.stringify(item))uni.navigateTo({url: '/pages-other/MessageDetail'})},async init (bool) {this.isSending = trueconst res = await noticeSelect({...this.page,title: this.keyword})if (this.page.currentPage === 1) {this.list = res.data.returnNoticeList} else {this.list = [...this.list, ...res.data.returnNoticeList]}this.page.total = res.totalthis.isSending = falseif (bool) {uni.stopPullDownRefresh()}},keywordChange (e) {if (this.keywordId) clearTimeout(this.keywordId)this.keywordId = setTimeout(() => {this.page.currentPage = 1this.init()}, 600)},resetVal () {this.page.currentPage = 1this.page.total = 0this.list = []this.isSending = false}}
}
</script>

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

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

相关文章

IDM扩展添加到Edge浏览器

IDM扩展添加到Edge浏览器 一般情况下&#xff0c;当安装IDM软件后&#xff0c;该软件将会自动将IDM Integration Module浏览器扩展安装到Edge浏览器上&#xff0c;但在某些情况下&#xff0c;需要我们手动安装&#xff0c;以下为手动安装步骤 手动安装IDM扩展到Edge浏览器 打…

AndroidStudio-常用布局

一、线性布局LinearLayout 线性布局内部的各视图有两种排列方式: 1.orientation属性值为horizontal时&#xff0c;内部视图在水平方向从左往右排列。 2.orientation属性值为vertical时&#xff0c;内部视图在垂直方向从上往下排列。 如果不指定orientation属性&#xff0c;…

Pr 入门系列之八:使用关键帧(上)

不论是固定效果、标准效果或是第三方效果&#xff0c;都可以通过改变属性的值来达到效果控制的目的。 任何动画要表现运动或变化&#xff0c;前后至少要给出属性值的两个不同的关键状态&#xff0c;称之为“关键帧” Keyframe。 而中间状态的变化和衔接&#xff0c;则是由计算机…

万字长文解读深度学习——循环神经网络RNN、LSTM、GRU、Bi-RNN

&#x1f33a;历史文章列表&#x1f33a; 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络&#xff08;前馈神经网络与反馈神经网络&#xff09;、常见算法概要汇总万字长文解读…

qt QMovie详解

1、概述 QMovie 是 Qt 框架中用于处理动画文件的类。它支持多种动画格式&#xff0c;包括 GIF 和一些常见的视频格式&#xff08;尽管对视频格式的支持依赖于底层平台&#xff09;。QMovie 类主要用于在 QLabel 或 QGraphicsView 等控件中显示动画。通过加载动画文件&#xff…

ip addr show

本文内容来自智谱清言 ip addr show 是 Linux 系统中用于显示网络接口配置的命令。这个命令属于 iproute2 软件包&#xff0c;该软件包在大多数 Linux 发行版中都是预安装的。ip addr show 命令可以用来查看所有网络接口的当前配置&#xff0c;或者指定某个特定接口的配置。 …

【ESP32】ESP-IDF开发 | 低功耗管理+RTC唤醒和按键唤醒例程

1. 简介 ESP32支持5种低功耗模式&#xff0c;低功耗管理单元包括调压器、功耗控制器、电源开关单元、电源域隔离单元 (Isolation Cell) 等部分。 1.1 RTC单元 RTC单元是ESP32低功耗管理的核心&#xff0c;可用于管理低功耗模式的进入和退出&#xff0c;控制时钟源、PLL、电源开…

重学 Android 自定义 View 系列(三):自定义步数进度条

前言 本篇文章主要是实现仿QQ步数View&#xff0c;很老的一个View了&#xff0c;但技术永不落后&#xff0c;开搂&#xff01; 最终效果如下&#xff1a; 1. 结构分析 QQStepView 主要由三个元素组成&#xff1a; 显示一个圆环进度条&#xff0c;通过外环和内环的角度变化来…

Spring中的过滤器和拦截器

Spring中的过滤器和拦截器 一、引言 在Spring框架中&#xff0c;过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;是实现请求处理的两种重要机制。它们都基于AOP&#xff08;面向切面编程&#xff09;思想&#xff0c;用于在请求的生命周期…

查缺补漏----用户上网过程(HTTP,DNS与ARP)

&#xff08;1&#xff09;HTTP 来自湖科大计算机网络微课堂&#xff1a; ① HTTP/1.0采用非持续连接方式。在该方式下&#xff0c;每次浏览器要请求一个文件都要与服务器建立TCP连接当收到响应后就立即关闭连接。 每请求一个文档就要有两倍的RTT的开销。若一个网页上有很多引…

C++之vector类的模拟实现

片头 嗨~小伙伴们&#xff0c;今天我们来一起学习关于C的vector类的模拟实现&#xff0c;准备好了吗&#xff1f;咱们开始咯~ 一、基本框架 namespace bit {template<class T>class vector {public:typedef T* iterator;typedef const T* const_iterator;// 针对const修…

流体力学ansys Fluent二次开发scheme_eval模块剖析

在ANSYS Fluent的二次开发中&#xff0c;scheme_eval 是 Scheme 编程语言中一个非常重要的模块&#xff0c;它允许用户执行动态的 Scheme 表达式和函数&#xff0c;从而扩展 Fluent 的功能。scheme_eval 模块通常与 Fluent 的计算和自定义脚本操作紧密结合。下面我们会对这个模…

前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作

前言 JS是前端三件套之一&#xff0c;也是核心&#xff0c;本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点&#xff0c;这篇是DOM;这篇文章是本人大一学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 文章目录 DOMDOM简介1.1、什么是DOM1…

ubuntu 22.04 server 安装 和 初始化 LTS

ubuntu 22.04 server 安装 和 初始化 下载地址 https://releases.ubuntu.com/jammy/ 使用的镜像是 ubuntu-22.04.5-live-server-amd64.iso usb 启动盘制作工具 https://rufus.ie/zh/ rufus-4.6p.exe 需要主板 支持 UEFI 启动 Ubuntu22.04.4-server安装 流程 https://b…

【elkb】kibana后台删除索引

打开kibana后台 点击 Management ---> Index Management 找到要删除的所以点击 点击delete index 删除成功

【计网】实现reactor反应堆模型 --- 多线程方案优化 ,OTOL方案

没有一颗星&#xff0c; 会因为追求梦想而受伤&#xff0c; 当你真心渴望某样东西时&#xff0c; 整个宇宙都会来帮忙。 --- 保罗・戈埃罗 《牧羊少年奇幻之旅》--- 实现Reactor反应堆模型 1 重新认识Reactor2 普通线程池3 OTOL方案3.1 多进程版3.2 多线程版 1 重新认识Re…

langgraph_plan_and_execute

整体入门demo 教程概览 欢迎来到LangGraph教程&#xff01; 这些笔记本通过构建各种语言代理和应用程序&#xff0c;介绍了如何使用LangGraph。 快速入门&#xff08;Quick Start&#xff09; 快速入门部分通过一个全面的入门教程&#xff0c;帮助您从零开始构建一个代理&a…

UnixBench和Geekbench进行服务器跑分

1 概述 服务器的基准测试&#xff0c;常见的测试工具有UnixBench、Geekbench、sysbench等。本文主要介绍UnixBench和Geekbench。 1.1 UnixBench UnixBench是一款开源的测试UNIX系统基本性能的工具&#xff08;https://github.com/kdlucas/byte-unixbench&#xff09;&#x…

布谷直播源码部署服务器关于数据库配置的详细说明

布谷直播源码搭建部署配置接口数据库 /public/db.php&#xff08;2019年8月后的系统在该路径下配置数据库&#xff0c;老版本继续走下面的操作&#xff09; 在项目代码中执行命令安装依赖库&#xff08;⚠️注意&#xff1a;如果已经有了vendor内的依赖文件的就不用执行了&am…

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统

概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”&#xff0c;只能捕捉特定领域内的用户偏好和项目特征&#xff0c;而现在生成模型增强了这些系统的功能&#xff0c;据报道&#xff0c;其性能优于传统方法。这些模型为推荐的概念和实施带…