阅读:7949回复:1
vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版
在【实现丰盛】的插件基础修改【vue2.0 移动端,下拉刷新,上拉加载更多 插件】,
1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined"> <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }"> <header class="pull-refresh"> <slot name="pull-refresh"> <span class="down-tip">下拉更新</span> <span class="up-tip">松开更新</span> <span class="refresh-tip">更新中……</span> </slot> </header> <slot></slot> <footer class="load-more"> <slot name="load-more"> <span>pw_loadingText</span> </slot> </footer> </section> </div> </template> <script> export default { props: { offset: { type: Number, default: 40 }, loadingText: { type: String, default: '加载中...' }, enableInfinite: { type: Boolean, default: true }, enableRefresh: { type: Boolean, default: true }, onRefresh: { type: Function, default: undefined, required: false }, onInfinite: { type: Function, default: undefined, require: false } }, data() { return { top: 0, state: 0, startY: 0, touching: false, infiniteLoading: false } }, methods: { touchStart(e) { this.startY = e.targetTouches[0].pageY this.startScroll = this.$el.scrollTop || 0 this.touching = true }, touchMove(e) { if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) { return } let diff = e.targetTouches[0].pageY - this.startY - this.startScroll if (diff > 0) e.preventDefault() this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) if (this.state === 2) { // in refreshing return } if (this.top >= this.offset) { this.state = 1 } else { this.state = 0 } }, touchEnd(e) { if (!this.enableRefresh) return this.touching = false if (this.state === 2) { // in refreshing this.state = 2 this.top = this.offset return } if (this.top >= this.offset) { // do refresh this.refresh() } else { // cancel refresh this.state = 0 this.top = 0 } }, refresh() { this.state = 2 this.top = this.offset this.onRefresh(this.refreshDone) }, refreshDone() { this.state = 0 this.top = 0 this.infiniteLoading = false }, infinite() { this.infiniteLoading = true this.onInfinite(this.infiniteDone) }, infiniteDone() { this.infiniteLoading = false }, onScroll(e) { if (!this.enableInfinite || this.infiniteLoading) { return } let outerHeight = this.$el.clientHeight let innerHeight = this.$el.querySelector('.inner').clientHeight let scrollTop = this.$el.scrollTop let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0 let infiniteHeight = this.$el.querySelector('.load-more').clientHeight let bottom = innerHeight - outerHeight - scrollTop - ptrHeight if (bottom < infiniteHeight) this.infinite() } } } </script> <style> .yo-scroll { position: absolute; top: 2.5rem; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; background-color: #ddd } .yo-scroll .inner { position: absolute; top: -2rem; width: 100%; transition-duration: 300ms; } .yo-scroll .pull-refresh { position: relative; left: 0; top: 0; width: 100%; height: 2rem; display: flex; align-items: center; justify-content: center; } .yo-scroll.touch .inner { transition-duration: 0ms; } .yo-scroll.down .down-tip { display: block; } .yo-scroll.up .up-tip { display: block; } .yo-scroll.refresh .refresh-tip { display: block; } .yo-scroll .down-tip, .yo-scroll .refresh-tip, .yo-scroll .up-tip { display: none; } .yo-scroll .load-more { height: 3rem; display: flex; align-items: center; justify-content: center; } </style> 把上面组件拷贝一下,保存vue文件pull-refresh.vue放到你的component/common文件夹下, 然后引入到页面 , 下面是引用demo <template> <div class="home"> <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" > <ul class="list"> <li v-for="item in articleList">pw_item.title</li> </ul> </v-scroll> </div> </template> <script> import { AjaxPlugin, XButton,Group, Cell, XInput} from 'vux' import Scroll from '../../common/pull-refresh'; export default { name: 'home', components: { 'v-scroll': Scroll, Group, XButton, Cell, XInput, AjaxPlugin }, data () { return { articleList:this.getArticleList(1), loadingText:'加载中...', counter : 1, //当前页面 num : 20, // 一次显示多少条 listdata: [], // 下拉更新数据存放数组 downdata: [] // 上拉更多的数据存放数组 } }, mounted : function(){ //this.getArticleList(); }, methods: { getArticleList: function (catId) { let _this = this getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59}},function(data){ let arr = data.result.data; _this.articleList=arr; if(arr.length>=_this.num){ _this.counter++; } }) return [] }, onRefresh(done) { let vm = this; vm.loadingText='加载中……'; getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59}},function(data){ let arr = data.result.data; vm.articleList=arr; if(arr.length>=vm.num){ vm.counter=2; } done() // call done }) }, onInfinite(done) { let vm = this; getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59,page:vm.counter}},function(data){ let arr = data.result.data; vm.articleList=vm.articleList.concat(arr); if(arr.length<vm.num){ vm.loadingText='加载完毕……'; //vm.$el.querySelector('.load-more').style.display = 'none'; return; }else{ vm.counter++; } done() // call done }) } } } function getDate(url,params,fn) { AjaxPlugin.$http.get(url, params) .then((response) => { if (fn) fn(response.data) }) } function htttpRequest (url, params, cb) { let dataStr = '' for (let key in params) { dataStr += key + '=' + params[key] } dataStr = dataStr.substr(0, dataStr.length - 1) console.log(dataStr); AjaxPlugin.$http.post(url, params) .then((response) => { if (cb) cb(response.data) }) } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { flex: 1; margin: 10px ; border-bottom:#ddd solid 1px; } a { color: #42b983; } </style> |
|
沙发#
发布于:2018-12-02 20:17
|
|