老师我下拉刷新不了! 帮看看问题出在哪了?
这是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>
正在回答
同学你好,老师把同学提供的代码放到源码里面,修改后测试是没有问题的,可以实现下拉刷新。
同学可以把代码放到源码里面去测试下,如果可以的话,就是同学其他相关的文件代码书写的有问题。
如果解决不了,建议scroll里面的代码粘贴上来,帮助同学排查问题。
如果帮助到了你,欢迎采纳~祝学习愉快~
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星