体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

这又是什么错误？？

来源：7-2 Header动画效果和显示隐藏

你要去哪

2020-03-03 03:14:59

<template>

  <div class="home">

    <header class="g-header-container">

      <home-header :class="{'header-transition':isHeaderTransition}" ref="header"/>

    </header>

    <me-scroll :data="recommends"

    pullDown

    pullUp

    @pull-down="pullToRefresh"

    @pull-up="pullToLoadMore"

    @scroll="scroll"

    @scroll-end="scrollEnd"

    ref="scroll"

    > <!-- //监听事件 -->

      <home-slider ref="slider"/>

      <home-nav/>

      <home-recommend @loaded="getRecommends" ref="recommend"/>

    </me-scroll>

    <div class="g-backtop-container">

    <me-backtop :visible="isBacktopVisible"/>

    </div>

    <router-view></router-view>

  </div>

</template>


<script>

import HomeHeader from './header';

import HomeSlider from './slider';

import MeScroll from 'base/scroll';

import MeBacktop from 'base/backtop';

import HomeNav from './nav';

import HomeRecommend from './recommend';

import {HEADER_TRANSITION_HEIGHT} from './config'



export default {

  name: "Home",

  components: {

    HomeHeader,

    HomeSlider,

    MeScroll,

    HomeNav,

    HomeRecommend,

    MeBacktop

  },

  data(){

    return {

      recommends:[],

      isBacktopVisible:false,

      isHeaderTransition:false

    };

  },

  methods:{

    updateScroll(){

    },

    getRecommends(recommends){

      this.recommends = recommends;

    },

    pullToRefresh(end){

      this.$refs.slider.update().then(end)

    },

    pullToLoadMore(end){

       this.$refs.recommend.update().then(end).catch(err =>{

         if(err){

           

         }

         end();

         //处理没有更多数据的情况

         //禁止继续加载更多数据

         //替换上拉时的loading,改为没有更多数据

       })


    },

    scroll(transition){

      this.changeHeaderStatus(transition)

    },

    scrollEnd(translate,scroll){ //返回顶部按钮显示隐藏样式

      this.isBacktopVisible = translate < 0 && -translate < scroll.height;

      this.changeHeaderStatus(transition)

    },

    backToTop(){                 //点击返回到顶部

      this.$refs.scroll && this.$refs.scroll.scrillToTop();

    },

    changeHeaderStatus(translate){

    if(transition > 0){

      this.$refs.header.hide();

      return;      

    }

    this.$refs.header.show();

    this.isHeaderTransition = -transitipon > HEADER_TRANSITION_HEIGHT;

    }

  }

};

</script>


<style lang="scss" scoped>

@import "~assets/scss/mixins";

.home {

  overflow: hidden;

  width: 100%;

  height: 100%;

  background-color: $bgc-theme;

}

</style>

<template>

  <me-navbar class="header" v-show="visible" title="jqjqjjqjqjqjqj">

    <i class="iconfont icon-scan" slot="left"></i>

    <div slot="center">搜索框</div>

    <i class="iconfont icon-msg" slot="right"></i>

  </me-navbar>

</template>

<script>

import MeNavbar from "base/navbar";

export default {

  name: "HomeHeader",

  components: {

    MeNavbar

  },

  data(){

    return {

      visible: false

    }

  },

  methods:{

    show(){

    this.visible= true;

    },

    hide(){

    this.visible= false;  

    }

  }

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.header {

  &.mine-navbar {

    background: transparent; 

    transition: background-color 0.5s;

  }

  &.header-transition{

    background: $header-bgc-translucent;

  }

.iconfont {

  color: $icon-color-default;

  font-size: $icon-font-size;

}

}

</style>


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


写回答

3回答

你要去哪

提问者

2020-03-03

还是找不到错误这是scroll/ndex.vue文件 

<template>

  <swiper :options="swiperOption" ref="swiper">

    <div class="mine-scroll-pull-down" v-if="pullDown"> <!-- 下拉 -->

     <me-loading :text="pullDownText" inline ref="pullDownLoading"/><!-- 下拉组件 -->

    </div>

    <swiper-slide>

      <slot></slot>

    </swiper-slide>

    <div class="mine-scroll-pull-up" v-if="pullUp">

      <me-loading :text="pullUpText" inline ref="pullUpLoading"/></div><!-- 上拉 -->

    <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

    },

    pullUp:{

      type: Boolean,

      default: false

    }

  },

  watch:{

    data(){

      this.update();

    }

  },

  created(){

    this.init();

  },

  methods:{

    update(){

    this.$refs.swiper && this.$refs.swiper.swiper.update();

    },

    scrollToTop(speed,runCallback){ //控制滚动条返回顶部幻灯片

    this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0,speed,runCallback);

    },

    init(){

      this.pulling=false, //是否正在下拉或上拉

      this.pullDownText=PULL_DOWN_TEXT_INIT,

      this.pullUpText=PULL_UP_TEXT_INIT,

      this.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, //监听松手刷新事件

          transitionEnd:this.scrollEnd//监听滑动停止事件

        }

      }

    },

    scroll(){

      const swiper = this.$refs.swiper.swiper;//通过ref找到swiper组件的swiper实例对象

      this.$emit('scroll',swiper.translate,this.$refs.swiper.swiper);   //触发显示返回顶层按钮事件

      if(this.pulling){ //如果正在下拉直接返回

        return;

      }


      if(swiper.translate > 0){ //如果下拉大于0 

         if(!this.pullDown){    //如果下拉不是pullDown返回

           return;            

         }

         if(swiper.translate > PULL_DOWN_HEIGHT){

            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);

         }else{

            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);

         }

      }  else if(swiper.isEnd){  //上拉

         if(!this.pullUp){

           return;

         }

      }

      const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > parseInt(swiper.$wrapperEl.css('height'));

        

      if(isPullUp){

        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START );

      }else {

        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT );

      }  

 

    },

    scrollEnd(){

    this.$emit('scroll-end',this.$refs.swiper.swiper.translate,this.$refs.swiper.swiper); 

    },

    touchEnd(){

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

      if(this.pulling){ //如果正在下拉直接返回

        return;

      }

      


      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);/* 回到100位置 */

        swiper.params.virtualTranslate = true;//定住不给回弹

        this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING) //正在刷新文字

        this.$emit('pull-down',this.pullDownEnd);//触发事件 告知已经下拉

      }  else if (swiper.isEnd) { // 底部

          const totalHeight = parseInt(swiper.$wrapperEl.css('height'));

          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;


          if (isPullUp) { // 上拉

            if (!this.pullUp) {

              return;

            }

            this.pulling = true;

            swiper.allowTouchMove = false; // 禁止触摸

            swiper.setTransition(swiper.params.speed);

            swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));

            swiper.params.virtualTranslate = true; // 定住不给回弹

            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);

            this.$emit('pull-up', this.pullUpEnd);//触发事件 告知已经上拉

          }

        }

      },

   

    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);/* 回到0位置 */

       setTimeout(()=>{

         this.$emit('pull-down-transition-end');

       },swiper.params.speed);//延迟3000毫秒触发下拉完成

    },

     pullUpEnd() {

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

        this.pulling = false;

        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);

        swiper.params.virtualTranslate = false;

        swiper.allowTouchMove = true;

      }

    }

  };

</script>

<style scoped>

  .swiper-container {

    overflow: hidden;

    width: 100%;

    height: 100%;

  };


  .swiper-slide {

    height: auto;

  }

  .mine-scroll-pull-up,

  .mine-scroll-pull-down {

    position: absolute;

    left: 0;

    width: 100%;

  }

  .mine-scroll-pull-down {

    bottom: 100%;

    height: 80px;

  }


  .mine-scroll-pull-up {

    top: 100%;

    height: 30px;

  }

</style>


  }

};

</script>

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



1

好帮手慕糖

2020-03-03

同学你好，这个是一个警告。是找不到translate这里。

但是老师这里测试，并没有出现这个，可能是其他文件导致的，可以根据提示找一下scroll/index.vue这个文件。

若还是无法解决，可以将这个文件的内容，粘贴过来，便于准确的定位与解决问题。

祝学习愉快！



1

好帮手慕糖

2020-03-03

同学你好，关于你的问题，回答如下：

1、老师又测试了下，在滚动的时候，会出现这个错误是吧，是因为如下：应该是translate而不是transition（下图中标注的都是要修改的哦。在home下的index.vue文件中）

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

2、修改之后，还有个报错，也是因为如下，不是transitipon而是translate（home下的index.vue文件中）

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

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

0

0 学习 · 10739 问题

查看课程

相似问题

可以从连接获取数据，但是使用promise无法将数据传到recommend.vue

回答 2

这个是什么错误啊？意思是挂载错误

回答 2

回答 4

请问这个报错是啥，如何解决

回答 5

这是什么错误？是不是不能在项目运行中修改？本来是可以运行的，照着弄了api就不能运行了

回答 5

打开慕课网App查看更多内容