下拉刷新报错
另,能不能解释下标识位pulling在这设置的目的以及使用的逻辑分析
if(this.pulling)return;
this.pulling=true;
this.pulling=false;
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 126 127 128 129 130 131 132 133 134 135 136 | <template> <swiper :options= "swiperOption" ref= "swiper" > <!-- 下拉刷新 --> <div class= "mine-scroll-pull-down" v-if= "pullDown" > <me-loading :text= "pullDownText" inline ref= "pullDownLoading" ></me-loading> </div> <swiper-slide> <slot></slot> </swiper-slide> <div class= "swiper-scrollbar" v-if= "scrollbar" slot= "scrollbar" ></div> </swiper> </template> <script> import {swiper,swiperSlide} from 'vue-awesome-swiper' ; import MeLoading from 'base/loading' ; import { PULL_DOWN_HEIGHT, PULL_DOWN_TEXT_INIT, PULL_DOWN_TEXT_START, PULL_DOWN_TEXT_ING, PULL_DOWN_TEXT_END, PULL_UP_HEIGHT, PULL_UP_TEXT_INIT, PULL_UP_TEXT_START, PULL_UP_TEXT_ING, PULL_UP_TEXT_END } from './config' ; export default { name: 'MeScroll' , components:{ swiper, swiperSlide, MeLoading }, props:{ scrollbar:{ type:Boolean, default:true }, data:{ type:[Array,Object] }, pullDown:{ type:Boolean, default:false } }, data(){ return { pulling:false, pullDownText:PULL_DOWN_TEXT_INIT, swiperOption:{ direction : 'vertical' , slidesPerView: 'auto' , freeMode: true, setWrapperSize: true, scrollbar: { el: this.scrollbar ? '.swiper-scrollbar' : null, hide: true }, on:{ sliderMove:this. scroll , touchEnd:this.touchEnd } } }; }, watch:{ data(){ this.update(); } }, methods:{ update(){ this.$refs.swiper &&this.$refs.swiper.swiper.update(); }, scroll (){ const swiper=this.$refs.swiper.swiper; if(this.pulling)return; if(swiper.translate > 0 ){//下拉 if(!this.pullDown)return; this.pulling=true; if(swiper.translate > PULL_DOWN_HEIGHT){ this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START); //this.pullDownText= '111' ;这样写就是直接修改data中的数据,会导致更新数据时发生闪动 }else{ this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT); } } }, touchEnd(){ const swiper=this.$refs.swiper.swiper; if(this.pulling)return; if(swiper.translate > 0 ){//下拉 if(!this.pullDown)return; swiper.allowTouchMove = false;// 禁止触摸 swiper.setTransition(swiper.params.speed); swiper.setTranslate(PULL_DOWN_HEIGHT); swiper.params.virtualTranslate = true;// 定住不给回弹 this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING); this.$emit( 'pull-down' , this.pullDownEnd);// 触发一个事件 } }, pullDownEnd(){ const swiper = this.$refs.swiper.swiper; this.pulling=false; this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END); swiper.params.virtualTranslate = false; swiper.allowTouchMove = true; swiper.setTransition(swiper.params.speed); swiper.setTranslate( 0 ); } } }; </script> <style lang= "scss" scoped> .swiper-container{ overflow : hidden ; width : 100% ; height : 100% ; } .swiper-slide{ height : auto ; } .mine-scroll-pull-down{ position : absolute ; left : 0 ; bottom : 100% ; width : 100% ; height : 80px ; } </style> |
17
收起
正在回答
2回答
同学你好, 因为touchEnd触发的时候,pulling变成true了,所以touchEnd里面的内容执行不了。如下修改:
先执行touchEnd的内容把下拉定住,然后再去改变标识的值。
另外,这个标识主要是避免重复下拉的情况。即当现在已经处在下拉加载过程中,用户重复下拉,就直接return返回,不再重复执行下拉内容了。
默认是false, 也就是没有下拉。当执行下拉后,就设置为true。这样用户再次下拉时,执行if判断,为true直接return返回,后面代码就不执行了。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧