老师,关于更新滚动条的问题?
我做到在组件<me-scroll :data="recommends">这一步滚动条已经出来了,不用在scroll组件里用watch监听data数据变化,这是怎么回事呢?
<template>
<div class="home">
<header class="g-header-container">
<home-header/>
</header>
<me-scroll :data="recommends">
<home-slider/>
<home-nav/>
<home-recommend @loaded="getRecommends"/>
</me-scroll>
<div class="g-backtop-container"></div>
<router-view/>
</div>
</template>
<script>
import HomeHeader from './header'
import HomeSlider from './slider'
import HomeNav from './nav'
import HomeRecommend from './recommend'
import MeScroll from 'base/scroll'
export default {
name: "Home",
components: {
HomeHeader,
HomeSlider,
HomeNav,
HomeRecommend,
MeScroll
},
data() {
return {
recommends: []
}
},
methods: {
updateScroll() {
},
getRecommends(recommends) {
this.recommends = recommends;
}
}
}
</script>
<template>
<swiper :options="swiperOptions">
<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'
export default {
name: "MeScroll",
components: {
swiper,
swiperSlide
},
props: {
scrollbar: {
type: Boolean,
default: true
}
},
data() {
return {
swiperOptions: {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
setWrapperSize: true,
scrollbar: {
el: this.scrollbar ? '.swiper-scrollbar' : null,
hide: true
}
}
}
}
}
</script>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星