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

 

pages.json 中的配置

   {

      "path": "pages/message",

      "style": {

        "navigationBarTitleText": "消息",

        "enablePullDownRefresh": true,

        "onReachBottomDistance": 50

      }

    },

<template><view class="message"><view class="box"><u-searchshape="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"><imagev-if="item.status === 1"class="message_icon"src="/static/message.png"></image><imagev-elseclass="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.tokenif (!this.token) {//#ifdef MP-WEIXINuni.reLaunch({url: '/pages/login/index'})//#endif//#ifdef H5|| APP-PLUSuni.navigateTo({url: '/pages/login/index'})//#endifsetTimeout(() => {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) returnthis.page.currentPage += 1this.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 = trueconst 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.totalthis.isSending = falseif (bool) {uni.stopPullDownRefresh()}},keywordChange (e) {if (this.keywordId) clearTimeout(this.keywordId)this.keywordId = setTimeout(() => {this.page.currentPage = 1this.init()}, 600)},resetVal () {this.page.currentPage = 1this.page.total = 0this.list = []this.isSending = false}}
}
</script>