实现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>
相关推荐
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
九鼎科技-Leo1 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html