加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > C语言 > 正文

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
<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 ? ? ?(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

<table class="html5">

    推荐文章
      热点阅读