添加pulling标志项之后下拉刷新失效

添加pulling标志项之后下拉刷新失效

不知道哪里出了问题,望老师解惑。这个是scroll/index

<template>
  <swiper :options="swiperOption" ref="swiper">
    <div class="mine-scroll-pull-dowm" v-if="pullDown">
      <me-loading :text="pullDownText" inline ref="pullDownLoading"/>
    </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
  } 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() {
        // console.log(this.$refs.swiper);
        this.$refs.swiper && this.$refs.swiper.swiper.update();
      },

      scroll() {
        const swiper = this.$refs.swiper.swiper;
        // console.log(this.pulling)
        if (this.pulling) {
          return;
        }

        if (swiper.translate > 0) {
          if (!this.pullDown) {
            return;
          }
          console.log(swiper.translate)
          this.pulling = true;

          if (swiper.translate > PULL_DOWN_HEIGHT) {
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
          }else {
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
          }
        }
      },
      touchEnd() {
        if (this.pulling) {
          return;
        }

        const swiper = this.$refs.swiper.swiper;

        if(swiper.translate > PULL_DOWN_HEIGHT) {
          if(!this.pullDown) {
            return;
          }

          this.pulling = true;
          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-dowm {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 80px;
  }
</style>


正在回答

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

1回答

同学你好,只需要在touchEnd里面把pulling值改为true就可以了,其他地方是不需要把值改为true的

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

同学修改后再测试下。

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

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

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

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

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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