Vant-ui 移动端下拉刷新

这个是基于上一篇文章,上拉加载更多,继续的下拉刷新

这里面利用到了 vant组件库里的 PullRefresh 

   下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成

代码:

data () {

        return {

                List: [], // 频道列表

                HomeList: [], // 用户选择的频道列表

                channelId: 0, // 选择频道的id

                loading: false, // 上拉每一页的加载状态

                done: false, // 是否加载完毕

                timestamp: undefined, // 记录上一次时间戳,需要给后台,做分页用的

                isLoading: false// 下拉刷新的加载状态

        }

},

// 使用侦听器实现数据的切换

watch: {

        async channelId () {

        this.HomeList = []

        this.timestamp = undefined

下拉刷新BUG 频繁切换频道造成的bug

        /*

在切换频道的时候,

需要手动把done设置为false,

表示当前频道没有加载完毕,

重新开始

        */

        this.done = false

        this.getArticleList()

}

},

async created () {

                const res = await getAllChannels()

                this.List = res.data.data.channels

                this.getArticleList()

},

methods: {

                // 获取文章列表

下拉 设置个参数 isPullDown = false

         async getArticleList (isPullDown = false) {

                // isPullDown = false 下拉刷新

                const resp = await getArticleListApi({

                channelId: this.channelId,

                timestamp: this.timestamp

})

console.log(resp.data.data)

const { pre_timestamp: preTimestamp, results } = resp.data.data

if (preTimestamp === null || results.length < 10) {

this.done = true

return

}

this.timestamp = preTimestamp

                // 下拉 如果isPullDown = false 就代表上拉加载

                if (isPullDown === false) {

                this.HomeList = [...this.HomeList, ...results]

                this.loading = false

              } else { // 否则就是下拉刷新

                // 把最新的数据直接替换HomeList

                this.HomeList = results

                // 关闭下拉加载状态,可以再次进行下拉刷新

                this.isLoading = false

        }

},

// 上拉加载更多

onLoad () {

if (this.HomeList.length > 0) {

// 发请求,拿数据,合并

this.getArticleList()

                }

},

        // 下拉刷新

onRefresh () {

                        this.getArticleList(true)

                        setTimeout(() => {

                        this.isLoading = false

                       }, 2000)

                }

        }

}