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

这里面利用到了 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)

}

Vant-ui 移动端下拉刷新相关推荐

[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
html下拉刷新原理,科技常识：移动端下拉刷新头实现原理及代码实现
科技常识:移动端下拉刷新头实现原理及代码实现 2021-05-24 21:23:20 • 互联网今天小编跟大家讲解下有关移动端下拉刷新头实现原理及代码实现 ,相信小伙伴们对这个话题应该有所关注吧,小 ...
Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
Onsen UI组件实现下拉刷新和固定定位
前言:最近用 Vue + Cordova + Onsen UI开发APP的过程中,在页面上遇到两个问题. (1)没法实现正常的类似于PC端页面中的固定定位,像position:fixed,这种css属 ...
移动端下拉刷新原理和实例
移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下.其中用到了一些touch事件和一些DOM属性CSS3属性.直接上代码,代码里面有注释. & ...
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
移动端下拉刷新infinitescroll
使用的是infinitescroll 移动端手机下拉刷新数据第一步:在serviceList.html导入 <script src="/js/jquery.infinitescrol ...
移动端下拉刷新，兼容ios，Android及微信浏览器
先看一下效果图下拉效果的样子参考的新浪微博,滚动加载是ydui的滚动加载组件因为滚动加载使用的ydui的组件,我这里便不再累述在线体验点这里首先分析下拉刷新是怎么实现的 1.页面滚动到顶部时, ...

Vant-ui 移动端下拉刷新

代码:

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

this.done = false

下拉设置个参数 isPullDown = false

async getArticleList (isPullDown = false) {

// isPullDown = false 下拉刷新

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

if (isPullDown === false) {

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

this.loading = false

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

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

this.HomeList = results

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

this.isLoading = false

}

onRefresh () {

this.getArticleList(true)

setTimeout(() => {

this.isLoading = false

}, 2000)

}

Vant-ui 移动端下拉刷新相关推荐

最新文章

热门文章

Vant-ui 移动端下拉刷新

代码:

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

this.done = false

下拉 设置个参数 isPullDown = false

async getArticleList (isPullDown = false) {

// isPullDown = false 下拉刷新

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

if (isPullDown === false) {

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

this.loading = false

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

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

this.HomeList = results

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

this.isLoading = false

}

onRefresh () {

this.getArticleList(true)

setTimeout(() => {

this.isLoading = false

}, 2000)

}

Vant-ui 移动端下拉刷新相关推荐

最新文章

热门文章

下拉设置个参数 isPullDown = false

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