第一步:
通常来讲轮播图都是基础的组件你须要把它的这个组建用在你想要的组件当中,因此轮播图咱们通常按照子组件来书写它npm
因此特征:1.slot,这样的话父组件包裹的dom就会被安装在这个插槽当中了 2.props设置你想要的轮播状态
e.g. <script> export default{ props:{ loop:{ type:Boolean, default:true }, autoPlay:{ type:Boolean, default:true } interval:{ type:Number, default:本身设置自动轮播时间 } } } </script>
由于咱们要横向滚动因此咱们须要使用better-scroll
初始化better-scroll
要在mounted里初始化
methods里调用方法
better-scroll里含有一个属性叫作sliderGroup,能够直接在你想要使用轮播图子组件的地方写上ref=‘sliderGroup’方便调用
这样子就能够使用this.$refs.sliderGroup.children去肯定你scroll中的的元素的个数dom
第二步:
那么父组件,哪里想要使用它,哪里写上这个子组件的标签名
而后在子组件的标签名单中嵌入你想要让子组件slot渲染的dom
能够使用v-for= ‘名字’来嵌入想要渲染的内容对象,这个对象能够是你想要从别人那爬来的数据,也能够是你本身设置的图片
你还能够在里面添加使得能够点击图片跳转连接ide
记住须要在data当中书写return对象,return的对象是你想要渲染在dom中的内容,或者是你想要本身添加的图片oop
e.g. data(){ return : 名字 type; } 或者 data() { return{ sliders:[你要加的图片连接]; } }
记住若是你使用了swiper或者better-scroll这种别人已经写好的库,要npm加上他们而且在对应组件中import他们this