[JavaScript知识库]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)

????????????????}

????????}

}