老师我下拉刷新不了! 帮看看问题出在哪了?

老师我下拉刷新不了! 帮看看问题出在哪了?

这是home.vue的

<template>
 <div class="home">
   <header class="g-header-container">
     <home-header/>
   </header>
   <me-scroll
     :data="recommends"
     pullDown
     @pull-down="pullToRefresh"
   >
    <home-slider ref="slider"/>
     <home-nav/>
     <home-recommend  @loaded="getRecommends"/>
   </me-scroll>
   <div class="g-backtop-container"></div>
   <router-view></router-view>
 </div>
</template>

<script>
 import MeScroll from 'base/scroll'
 import HomeHeader from './header'
 import HomeSlider from './slider'
 import HomeNav from './nav'
 import HomeRecommend from './recommend'

 export default {
   name: 'Home',
   components: {
     HomeHeader,
     HomeSlider,
     MeScroll,
     HomeNav,
     HomeRecommend
   },
   data() {
     return {
       recommends: []
     };
   },
   methods: {
     updateScroll() {

     },
     getRecommends(recommends) {
       this.recommends = recommends;
     },

     pullToRefresh () {
       this.$refs.slider.update().then(end);
       // setTimeout(() => {
       //   '下拉刷新'
       // }, 1000);
     }

   }

 };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 .home {
   overflow: hidden;
   width: 100%;
   height: 100%;
   background-color: $bgc-theme;
 }
</style>


这是slider.vue

<template>
<div class="slider-wrapper">
  <me-loading v-if="!sliders.length"></me-loading>
  <me-slider
    :direction="direction"
    :loop="loop"
    :interval="interval"
    :pagination="pagination"
   v-else
    >
    <swiper-slide  v-for="(item, index) in sliders" :key="index">
      <a :href="item.linkUrl"  class="slider-link">
        <img :src="item.picUrl" alt="" class="slider-img"></a>
    </swiper-slide>
  </me-slider>
</div>
</template>

<script>
import MeSlider from 'base/slider';
import {swiperSlide} from 'vue-awesome-swiper'
import {sliderOptions} from './config'
import {getHomeSlider} from 'api/home'
import MeLoading from 'base/loading'


 export default {
   name: 'HomeSlider',
   components: {
     MeSlider,
     MeLoading,
     swiperSlide,
   },
   data() {
     return {
       direction: sliderOptions.direction,
       loop: sliderOptions.loop,
       interval: sliderOptions.interval,
       pagination: sliderOptions.pagination,
       sliders: []
     };
   },
   created () {
    this.getSliders();
   },
   methods: {
     //API
     update() {
     return this.getSliders();
     },

     getSliders() {
      return getHomeSlider().then(data =>{
         this.sliders = data;
       })
     }
   }
 };
</script>

<style lang="scss" scoped>
 .slider-wrapper {
    height: 183px;
 }
 .slider-link {
   display: block;
 }
 .slider-link,
 .slider-img {
   height: 100%;
   width: 100%;
 }
</style>

正在回答

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

2回答

同学你好,老师把同学提供的代码放到源码里面,修改后测试是没有问题的,可以实现下拉刷新。

同学可以把代码放到源码里面去测试下,如果可以的话,就是同学其他相关的文件代码书写的有问题。

如果解决不了,建议scroll里面的代码粘贴上来,帮助同学排查问题。

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


好帮手慕言 2019-08-17 16:16:19

同学你好,使用同学提供的代码测试是有报错的。提示end未定义

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

原因是pullToRefresh函数没有传参,就直接使用了。

代码修改

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

老师在视频中有传参哦

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

遇到问题,可以先看一下控制台是否有报错,根据报错信息就可以找到问题啦。

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

  • 提问者 慕无忌0045533 #1
    老师! 那个end 我加上去了也没有效果,报错是没有了,但是还是没有下拉效果
    2019-08-17 17:56:10
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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