老师,关于更新滚动条的问题?

老师,关于更新滚动条的问题?

我做到在组件<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

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

1回答
卡布琦诺 2018-07-27 16:29:43

因同学代码上传的不完整,缺少子组件的代码,建议上传完整的代码;从你贴上来的代码来看,虽然你的代码滚动条出现了,但是有可以发生异常,所以,建议先尝试完善 scroll 组件,watch 监控数据变化,更新滚动条,使其完善。

希望可以帮到你!如有疑问欢迎再次提问!

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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