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

pages.json 中的配置

{

"path": "pages/message",

"style": {

"navigationBarTitleText": "消息",

"enablePullDownRefresh": true,

"onReachBottomDistance": 50

}

},

javascript 复制代码
<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>
相关推荐
蔗理苦40 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
要记得喝水1 小时前
C#某公司面试题(含题目和解析)--1
开发语言·windows·面试·c#·.net
二川bro1 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js