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

news2024/11/14 16:33:25

 

pages.json 中的配置

   {

      "path": "pages/message",

      "style": {

        "navigationBarTitleText": "消息",

        "enablePullDownRefresh": true,

        "onReachBottomDistance": 50

      }

    },

<template>
  <view class="message">
    <view class="box">
      <u-search
        shape="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">
          <image
            v-if="item.status === 1"
            class="message_icon"
            src="/static/message.png"
          ></image>
          <image
            v-else
            class="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.token
    if (!this.token) {
      //#ifdef MP-WEIXIN
      uni.reLaunch({
        url: '/pages/login/index'
      })
      //#endif
      //#ifdef H5|| APP-PLUS
      uni.navigateTo({
        url: '/pages/login/index'
      })
      //#endif
      setTimeout(() => {
        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) return
    this.page.currentPage += 1
    this.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 = true

      const 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.total
      this.isSending = false

      if (bool) {
        uni.stopPullDownRefresh()
      }
    },

    keywordChange (e) {
      if (this.keywordId) clearTimeout(this.keywordId)
      this.keywordId = setTimeout(() => {
        this.page.currentPage = 1
        this.init()
      }, 600)
    },

    resetVal () {
      this.page.currentPage = 1
      this.page.total = 0
      this.list = []
      this.isSending = false
    }
  }
}
</script>


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

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

相关文章

无人机培训机型有哪些?CAAC考证选3类还是4类

无人机培训是一个涵盖多个方面的综合性过程&#xff0c;旨在培养具备无人机操作技能和相关知识的人才。 无人机培训机型 无人机培训通常涵盖多种机型&#xff0c;以满足不同领域和应用场景的需求。常见的无人机培训机型包括&#xff1a; 1. 多旋翼无人机&#xff1a;也称为多…

95.【C语言】数据结构之双向链表的头插,头删,查找,中间插入,中间删除和销毁函数

目录 1.双向链表的头插 方法一 方法二 2.双向链表的头删 3.双向链表的销毁 4.双向链表的某个节点的数据查找 5.双向链表的中间插入 5.双向链表的中间删除 6.对比顺序表和链表 承接94.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删文章 1.双向链表的头插 方法…

[极客大挑战 2019]PHP 1

[极客大挑战 2019]PHP 1 审题 猜测备份在www.zip中&#xff0c;输入下载文件。 知识点 反序列化 解题 查看代码 看到index.php中包含了class.php,直接看class.php中的代码 查看条件 当usernameadmin&#xff0c;password100时输出flag 构造反序列化 输入select中&#…

C++面试基础知识:排序算法 C++实现

上周实习面试&#xff0c;手撕代码快排没写出来&#xff0c;非常丢人&#xff0c;把面试官都给逗笑了。 基础不牢&#xff0c;地动山摇&#xff0c;基础的算法还是要牢记于心的。 插入排序 分为有序区和无序区&#xff0c;每次从无序区中选出一个&#xff0c;放到有序区域中。…

yarn报错`warning ..\..\package.json: No license field`:已解决

出现这个报错有两个原因 1、项目中没有配置许可证 在项目根目录package.json添加 {"name": "next-starter","version": "1.0.0",# 添加这一行"license": "MIT", }或者配置私有防止发布到外部仓库 {"priv…

批量缓存模版

批量缓存模版 缓存通常有两种使用方式&#xff0c;一种是Cache-Aside&#xff0c;一种是cache-through。也就是旁路缓存和缓存即数据源。 一般一种用于读&#xff0c;另一种用于读写。参考后台服务架构高性能设计之道。 最典型的Cache-Aside的样例&#xff1a; //读操作 da…

亚信安全并购亚信科技交易正式完成

亚信安全与亚信科技联合宣布&#xff0c;亚信安全正式完成对亚信科技的控股权收购&#xff0c;由此&#xff0c;规模近百亿的中国最大的软件企业之一诞生&#xff01;双方将全面实现公司发展战略&#xff0c;以及优势能力与资源的深度融合&#xff0c;形成业界独有的“懂网、懂…

MybatisPlus入门(十)MybatisPlus-逻辑删除和多记录操作

一、Mybatis-Plus 多记录操作 按照主键删除多条记录 List<Long> ids Arrays.asList(new Long[]{2,3}) userDao.deleteBatchIds(ids); 示例代码如下: Testvoid testDelete(){//删除指定多条数据List<Long> list new ArrayList<>();list.add(14025513424818…

【css】overflow: hidden效果

1. 不添加overflow: hidden 1.1 效果 上面无圆角 1.2 代码 <template><view class"parent"><view class"child1">child1</view><view class"child2">child2</view></view></template><…

「QT」几何数据类 之 QPolygonF 浮点型多边形类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

架构篇(04理解架构的演进)

目录 学习前言 一、架构演进 1. 初始阶段的网站架构 2. 应用服务和数据服务分离 3. 使用缓存改善网站性能 4. 使用应用服务器集群改善网站的并发处理能力 5. 数据库读写分离 6. 使用反向代理和CDN加上网站相应 7. 使用分布式文件系统和分布式数据库系统 8. 使用NoSQL和…

OpenCV基础05_GUI和PyMsql

目录 一、PySimpleGUI 1、布局和窗口 2、文本框组件 3、视频处理 4、图片处理 二、pymsql 1、数据库操作 2、数据采集 3、人脸识别 一、PySimpleGUI PySimpleGUI 是一个用于简化 GUI 编程的 Python 包&#xff0c;它封装了多种底层 GUI 框架&#xff08;如 tkinter、…

ModuleNotFoundError: No module named ‘_ssl‘ centos7中的Python报错

报错 ModuleNotFoundError: No module named ‘_ssl’ 解决步骤&#xff1a; 1.下载openssl wget https://www.openssl.org/source/openssl-3.0.7.tar.gz tar -zxvf openssl-3.0.7.tar.gz cd openssl-3.0.72.编译安装 ./config --prefix/usr/local/openssl make make install3…

外呼系统只需这 3 种功能,电销效率快速提升

在当今竞争激烈的商业环境中&#xff0c;电销团队面临着诸多挑战。如何提高电销效率&#xff0c;成为了企业关注的焦点。今天&#xff0c;小编就给大家介绍&#xff0c;沃创云三种外呼系统功能&#xff0c;让你的电销效率快速提升。 一、智能拨号功能 传统的电销方式中&#x…

18. Mouse 鼠标、KeyBoard 键盘和 Action 消息事件处理

在本节的例子中&#xff0c;会自定义很多UI控件实现不同的事件响应&#xff0c;如下图所示&#xff1a; IOKit 事件框架 事件流程 OS X的事件依赖 IOKit 框架&#xff0c;事件发生后首先会传递到IOKit框架中处理&#xff0c;然后通知Window Server服务层处理&#xff0c;由…

C# 实现对指定句柄的窗口进行键盘输入的实现

在C#中实现对指定句柄的窗口进行键盘操作&#xff0c;可以通过多种方式来实现。以下是一篇详细的指南&#xff0c;介绍如何在C#中实现这一功能。 1. 使用Windows API函数 在C#中&#xff0c;我们可以通过P/Invoke调用Windows API来实现对指定窗口的键盘操作。以下是一些关键的…

Spring Plugin与策略模式:打造动态可扩展的应用

目录 一、策略模式 二、Spring Plugin 2.1 Spring Plugin 实现策略模式开发 2.2 策略模式优缺点 三、Spring Plugin 原理 一、策略模式 策略模式是一种设计模式&#xff0c;它允许程序在运行中动态的选择不同的行为方式进行动态执行。策略模式的核心思想是将行为封装在一个个…

Word大珩助手:超大数字怎么读?35位数字?69位数字?

俄罗斯日前对谷歌开出了20000000000000000000000000000000000&#xff08;35位数字&#xff09;美元的罚款 这一数字远超全球GDP总和&#xff0c;消息一出很快就登上热搜。 面对这样一个庞大的数字&#xff0c;人们不禁好奇&#xff0c;这样的数字该如何读出来&#xff1f; …

asp.net文件防盗链

URLRewriter实现 可以参考下面的文章 代码 .net framework 新建asp.net framework的web项目&#xff0c;新建AntiTheftChainHandler using System.Web;namespace AntiTheftChainStu01.Handler {public class AntiTheftChainHandler : IHttpHandler{public bool IsReusable…

【含开题报告+文档+PPT+源码】基于SSM的蛋糕店销售管理系统的设计与实现

开题报告 在现代社会&#xff0c;蛋糕作为一种受欢迎的甜点&#xff0c;广泛应用于各种庆祝活动和节日。传统的蛋糕预订方式往往需要用户亲自到店面进行预订&#xff0c;预订流程繁琐&#xff0c;时间和地点限制也给用户带来了不便。随着智能手机和移动互联网的普及&#xff0…