vue中使用betterscroll实现上拉刷新
发布时间:2020-12-15 03:29:56 所属栏目:C语言 来源:网络整理
导读: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
<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
? ? ? ? ? ? ? ? }
? ? ? ? }
})
>
?
? ? ? ? ? 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
?
?
?
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!