下拉刷新报错

来源:5-2 下拉刷新--松手刷新

迷失的小麦

2020-04-07 08:35:49

另,能不能解释下标识位pulling在这设置的目的以及使用的逻辑分析

 if(this.pulling)return;

 

this.pulling=true;

this.pulling=false;

<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>

http://img.mukewang.com/climg/5e8bc8fe0922a6e519201048.jpg

写回答

2回答

好帮手慕夭夭

2020-04-07

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

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

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

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

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

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

0

迷失的小麦

提问者

2020-04-07

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

0

0 学习 · 10739 问题

查看课程