vue中使用betterscroll实现上拉刷新

前端之家收集整理的这篇文章主要介绍了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       原文链接:https://www.f2er.com/note/413534.html

猜你在找的程序笔记相关文章