下拉刷新报错

下拉刷新报错

另,能不能解释下标识位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{
    overflowhidden;
    width100%;
    height100%;
  }
  .swiper-slide{
    heightauto;
  }
  .mine-scroll-pull-down{
    positionabsolute;
    left0;
    bottom100%;
    width100%;
    height80px;
  }
</style>

http://img1.sycdn.imooc.com//climg/5e8bc8fe0922a6e519201048.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 因为touchEnd触发的时候,pulling变成true了,所以touchEnd里面的内容执行不了。如下修改:

先执行touchEnd的内容把下拉定住,然后再去改变标识的值。

http://img1.sycdn.imooc.com/climg/5e8c73df0974668004500570.jpg

另外,这个标识主要是避免重复下拉的情况。即当现在已经处在下拉加载过程中,用户重复下拉,就直接return返回,不再重复执行下拉内容了。

默认是false, 也就是没有下拉。当执行下拉后,就设置为true。这样用户再次下拉时,执行if判断,为true直接return返回,后面代码就不执行了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

提问者 迷失的小麦 2020-04-07 08:58:59

这个报错是没有设置标识位的时候出现的,如果添加了标识位就会失去变化提示文字和松手刷新的效果,不知如何解决

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码