实现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>
实现uniapp-微信小程序 搜索框+上拉加载+下拉刷新

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