实现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 修改字段类型但是存在视图依赖
其实视图的存在与否在数据库界一直是一个话题。用好视图可以简化程序的很多代码,用不好视图不仅会给维护带来很多的不便,也会造成很大的性能问题。下面我从维护方面给出案例,以及当存在这种问题的时候,如何去解决这个问题。 假设…...
基于.NET 9实现实时进度条功能:前后端完整示例教程
要在基于.NET 9的应用中实现进度条功能,我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例,展示了如何在ASP.NET Core应用中实现这一功能。 但是,我在.net framework4.7.2框架下,实际不了HttpC…...
力扣 LeetCode 19. 删除链表的倒数第N个结点(Day2:链表)
解题思路: 快慢指针 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实现声纹识别功能,调用科大讯飞接口: 声纹识别 API 文档 | 讯飞开放平台文档中心 其接口要求音频文件格式为mp3 二、问题产生 在安卓端根据官方文档说明,系统并不支持直接录制mp3格式音频,支持格式如…...
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 框架中广泛运用了多种设计模式,今天让我们来学习一下 1. 单例模式(Singleton Pattern) 用途:在Spring框架中,Bean默认是单例的,也就是说在容器中每种类型的Bean只有一个实例。这个设计可以节省资源…...
提升百度排名的有效策略与技巧解析
内容概要 提升百度排名对于网站的成功至关重要。首先,了解百度排名的基本原则,掌握搜索引擎是如何评估网页质量的,是优化过程中不可或缺的一部分。搜索引擎越来越倾向于将用户需求放在首位,因此提供高质量的内容和良好的用户体验…...
【Linux】Linux下查看cpu信息指令(top/mpstat/iostat/pidstat)说明
top命令 top(1) - Linux manual page (man7.org) top查看总的CPU利用率 us: 用户空间消耗的CPU资源占比,进程在用户态执行函数调用,编解码消耗的都是us sy: 内核空间消耗的CPU资源占比,进程调用系统调用达到内核后会增加sy的消耗 ni&…...
HDLBIts习题(3):使用冒号表示位宽时,冒号两端必须是常量
(1)易错习题1:Circuits - Combinational Logic - Multiplexers - 256-to-1 4bit multiplexer 使用冒号表示位宽时,冒号两端必须是常量,因此如果使用变量,可以使用位拼接的方法。 (2)…...
C++20协程详解
文章目录 什么是协程为什么需要协程什么时候使用协程协程的类别C20的协程协程的使用关键字co_wait框架一阶段完成数据交换co_yieldco_return 什么是协程 我们在学习编程的过程中,逐渐从单线程,到多线程,再到异步编程和并发处理 这些异步与并…...
Chromium 中chrome.system.display扩展接口定义c++
一、chrome.system.display 使用 system.display API 查询展示元数据。 权限 system.display 类型 ActiveState Chrome 117 及更高版本 用于指示系统是否检测到和使用显示屏的枚举。如果系统未检测到显示屏(可能断开连接,或因睡眠模式等原因而被视…...
容器docker的ulimit
Ulimit 在linux里ulimit命令可以对shell生成的进程的资源进行限制。 常用的ulimit限制 打开文件句柄数core文件大小设置进程能够消耗的虚拟内存设置用户能够打开的进程数目 不太常用的ulimit限制 设置数据段的最大值.单位:kbytes 设置创建文件的最大值.单位:blocks 设置在…...
一、HTML
一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大,且都有自己的内核。 什么是内核: 内核是浏览器的核心,用于处理浏览器所得到的各种资源。 例如,服务器发送图片、视频、音频的资源,浏览…...
使用Geekbench6软件对真实和虚拟的苹果桌面系统(macOS)进行打分比较
前言 感觉VMWare安装的MacOS使用起来非常的慢,所以特意用打分软件GeekBench进行了评测。 一、Geekbench的安装 可以从官网直接进行下载, 链接是: 二、Geekbench的直接使用 2.1、真机的信息 2.2、虚拟机的信息 三、打分的比较 3.1、真机…...
lua入门教程:随机数
在Lua中,生成随机数是通过math库中的math.random函数来实现的。这个函数可以生成一个[0, 1)区间内的随机浮点数。如果你需要生成其他范围内的随机数,或者需要整数类型的随机数,可以通过一些简单的数学运算来调整math.random的输出。 以下是如…...
华为大咖说 | 浅谈智能运维技术
本文分享自华为云社区:华为大咖说 | 浅谈智能运维技术-云社区-华为云 本文作者:李文轩 ( 华为智能运维专家 ) 全文约2695字,阅读约需8分钟 在大数据、人工智能等新兴技术的加持下,智能运维(AI…...
creo toolkit二次开发学习之获取任意选择模型作为元件,并进行获取约束等
获取任意选择模型作为元件进行操作前,先了解组件路径和程序集的构成:creo toolkit二次开发学习之程序集(ProAsmcomp)和装配体组件路径对象(ProAsmcomppath)-CSDN博客 代码如下 ProError test1() {ProError…...
sanitize-html 防止 XSS(跨站脚本攻击)
sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库,主要用于防止 XSS(跨站脚本攻击)。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的,从而确保用户输入的内容不会包含潜在的恶意代码。 主要功能 HTML…...
【JavaEE】文件io
目录 文件类型 File概述 属性 构造方法 常用方法 Reader Writer InputStream OutputStream 字节流转字符流 通过Scanner读取InputStream 通过PrintWriter转换outputstream 示例 文件类型 从编程的角度看,文件类型主要就是两大类 文本(文…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
Python训练营-Day26-函数专题1:函数定义与参数
题目1:计算圆的面积 任务: 编写一个名为 calculate_circle_area 的函数,该函数接收圆的半径 radius 作为参数,并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求:函数接收一个位置参数 radi…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...
