实现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>
相关推荐
GISer_Jinger几秒前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话1 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时1 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳1 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子4 分钟前
深入解析 iframe
前端
WEI_Gaot4 分钟前
ES6 模板字符串
前端·javascript
前端大白话4 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话4 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
前端大白话6 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构
袋鱼不重8 分钟前
Vue3中 watch 和 watchEffect 的区别
前端