当前位置: 首页 > news >正文

实现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>

相关文章:

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

pages.json 中的配置 { "path": "pages/message", "style": { "navigationBarTitleText": "消息", "enablePullDownRefresh": true, "onReachBottomDistance": 50 } }, <template><view class…...

PostgreSQL 修改字段类型但是存在视图依赖

其实视图的存在与否在数据库界一直是一个话题。用好视图可以简化程序的很多代码&#xff0c;用不好视图不仅会给维护带来很多的不便&#xff0c;也会造成很大的性能问题。下面我从维护方面给出案例&#xff0c;以及当存在这种问题的时候&#xff0c;如何去解决这个问题。 假设…...

基于.NET 9实现实时进度条功能:前后端完整示例教程

要在基于.NET 9的应用中实现进度条功能&#xff0c;我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例&#xff0c;展示了如何在ASP.NET Core应用中实现这一功能。 但是&#xff0c;我在.net framework4.7.2框架下&#xff0c;实际不了HttpC…...

力扣 LeetCode 19. 删除链表的倒数第N个结点(Day2:链表)

解题思路&#xff1a; 快慢指针 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {ListNode dummy new ListNode(-1);dummy.next head;ListNode fast dummy;ListNode slow dummy;for (int i 0; i < n; i) {fast fast.next;}while (fast.ne…...

音频格式转换

一、场景 项目需求需要App实现声纹识别功能&#xff0c;调用科大讯飞接口&#xff1a; 声纹识别 API 文档 | 讯飞开放平台文档中心 其接口要求音频文件格式为mp3 二、问题产生 在安卓端根据官方文档说明&#xff0c;系统并不支持直接录制mp3格式音频&#xff0c;支持格式如…...

npm list @types/node 命令用于列出当前项目中 @types/node 包及其依赖关系

文章目录 作用示例常用选项示例命令注意事项 1、实战举例**解决方法**1. **锁定唯一的 types/node 版本**2. **清理依赖并重新安装**3. **设置 tsconfig.json 的 types**4. **验证 Promise 类型支持** **总结** npm list types/node 命令用于列出当前项目中 types/node 包及其…...

【Spring】Spring框架中有有哪些常见的设计模式

Spring 框架中广泛运用了多种设计模式&#xff0c;今天让我们来学习一下 1. 单例模式&#xff08;Singleton Pattern&#xff09; 用途&#xff1a;在Spring框架中&#xff0c;Bean默认是单例的&#xff0c;也就是说在容器中每种类型的Bean只有一个实例。这个设计可以节省资源…...

提升百度排名的有效策略与技巧解析

内容概要 提升百度排名对于网站的成功至关重要。首先&#xff0c;了解百度排名的基本原则&#xff0c;掌握搜索引擎是如何评估网页质量的&#xff0c;是优化过程中不可或缺的一部分。搜索引擎越来越倾向于将用户需求放在首位&#xff0c;因此提供高质量的内容和良好的用户体验…...

【Linux】Linux下查看cpu信息指令(top/mpstat/iostat/pidstat)说明

top命令 top(1) - Linux manual page (man7.org) top查看总的CPU利用率 us: 用户空间消耗的CPU资源占比&#xff0c;进程在用户态执行函数调用&#xff0c;编解码消耗的都是us sy: 内核空间消耗的CPU资源占比&#xff0c;进程调用系统调用达到内核后会增加sy的消耗 ni&…...

HDLBIts习题(3):使用冒号表示位宽时,冒号两端必须是常量

&#xff08;1&#xff09;易错习题1&#xff1a;Circuits - Combinational Logic - Multiplexers - 256-to-1 4bit multiplexer 使用冒号表示位宽时&#xff0c;冒号两端必须是常量&#xff0c;因此如果使用变量&#xff0c;可以使用位拼接的方法。 &#xff08;2&#xff09;…...

C++20协程详解

文章目录 什么是协程为什么需要协程什么时候使用协程协程的类别C20的协程协程的使用关键字co_wait框架一阶段完成数据交换co_yieldco_return 什么是协程 我们在学习编程的过程中&#xff0c;逐渐从单线程&#xff0c;到多线程&#xff0c;再到异步编程和并发处理 这些异步与并…...

Chromium 中chrome.system.display扩展接口定义c++

一、chrome.system.display 使用 system.display API 查询展示元数据。 权限 system.display 类型 ActiveState Chrome 117 及更高版本 用于指示系统是否检测到和使用显示屏的枚举。如果系统未检测到显示屏&#xff08;可能断开连接&#xff0c;或因睡眠模式等原因而被视…...

容器docker的ulimit

Ulimit 在linux里ulimit命令可以对shell生成的进程的资源进行限制。 常用的ulimit限制 打开文件句柄数core文件大小设置进程能够消耗的虚拟内存设置用户能够打开的进程数目 不太常用的ulimit限制 设置数据段的最大值.单位:kbytes 设置创建文件的最大值.单位:blocks 设置在…...

一、HTML

一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大&#xff0c;且都有自己的内核。 什么是内核&#xff1a; 内核是浏览器的核心&#xff0c;用于处理浏览器所得到的各种资源。 例如&#xff0c;服务器发送图片、视频、音频的资源&#xff0c;浏览…...

使用Geekbench6软件对真实和虚拟的苹果桌面系统(macOS)进行打分比较

前言 感觉VMWare安装的MacOS使用起来非常的慢&#xff0c;所以特意用打分软件GeekBench进行了评测。 一、Geekbench的安装 可以从官网直接进行下载&#xff0c; 链接是&#xff1a; 二、Geekbench的直接使用 2.1、真机的信息 2.2、虚拟机的信息 三、打分的比较 3.1、真机…...

lua入门教程:随机数

在Lua中&#xff0c;生成随机数是通过math库中的math.random函数来实现的。这个函数可以生成一个[0, 1)区间内的随机浮点数。如果你需要生成其他范围内的随机数&#xff0c;或者需要整数类型的随机数&#xff0c;可以通过一些简单的数学运算来调整math.random的输出。 以下是如…...

华为大咖说 | 浅谈智能运维技术

本文分享自华为云社区&#xff1a;华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者&#xff1a;李文轩 &#xff08; 华为智能运维专家 &#xff09; 全文约2695字&#xff0c;阅读约需8分钟 在大数据、人工智能等新兴技术的加持下&#xff0c;智能运维&#xff08;AI…...

creo toolkit二次开发学习之获取任意选择模型作为元件,并进行获取约束等

获取任意选择模型作为元件进行操作前&#xff0c;先了解组件路径和程序集的构成&#xff1a;creo toolkit二次开发学习之程序集&#xff08;ProAsmcomp&#xff09;和装配体组件路径对象&#xff08;ProAsmcomppath&#xff09;-CSDN博客 代码如下 ProError test1() {ProError…...

sanitize-html 防止 XSS(跨站脚本攻击)

sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库&#xff0c;主要用于防止 XSS&#xff08;跨站脚本攻击&#xff09;。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的&#xff0c;从而确保用户输入的内容不会包含潜在的恶意代码。 主要功能 HTML…...

【JavaEE】文件io

目录 文件类型 File概述 属性 构造方法 常用方法 Reader Writer InputStream OutputStream 字节流转字符流 通过Scanner读取InputStream 通过PrintWriter转换outputstream 示例 文件类型 从编程的角度看&#xff0c;文件类型主要就是两大类 文本&#xff08;文…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...