前端之家收集整理的这篇文章主要介绍了
vue中使用betterscroll实现上拉刷新，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<table class="html5"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
ref>
>
>
<FooterDom>
>
>
template>
>
import BScroll from 'better-scroll'
export default {
mounted () {
const scroll = new BScroll(this.$refs.wrapper,{
scrollY: true, click: true, mouseWheel: true, pullUpLoad: {
threshold: 50
}
})
/* 触发加载的时候 */
scroll.on('pullingUp',() => {
if (this.$route.fullPath === '/infor' || this.$route.fullPath === '/schedule' || this.$route.fullPath === '/cases') {
this.$store.commit('updateLoadPage',{})
scroll.refresh() // 数据刷新，刷新scroll
}
scroll.finishPullUp() // 执行完成，以备下一次触发
})
}
}
>
>
const store = new Vuex.Store({
state: {
loadPage: 1
}，
mutations: {
updateLoadPage (state,data) {
if (data.initial) {
state.loadPage = 0
} else {
state.loadPage++
}
}
}，
getters: {
getLoadPage (state) {
return state.loadPage
}
}
})
>
>
to v-if>上拉加载更多∨>
v-if>没有更多数据>
>
>
export default {
data() {
return {
allLoaded: false
}
}, computed: {
pageQuery () {
var loadPage = this.$store.getters.getLoadPage || 1
var pagesize = 10 * loadPage
var page = 1
return {
pagesize, page
}
}
}, methods: {
// 页面跳转
toPage(argData,argParam) {
this.$router.push({ path: argData,query: argParam })
}, // 获取列表
getSuccesscaseList() {
this.$axios({
url: 'Api/successcase.successcase/getSuccesscaseList', method: 'post', data: this.pageQuery
}).then(response => {
if (response.success) {
this.dealList(response.data.data)
}
})
}, dealList(data) {//根据返回回来的数据结构进行修改
if (data.pagenum === 1) {
this.allLoaded = true
}
this.list = data.rows
}
}, beforeCreate () {
this.$store.commit('updateLoadPage',{
initial: true
})
}, mounted() {
this.getSuccesscaseList()
}, watch: {//按需求修改
pageQuery (cur,old) {
if (!this.allLoaded
