</a>
</div>
</slider>
</div>
<ul v-for='item in su'>
<li>{{item}}</li>
</ul>
</div>
</scroll>
</div>
</template>
<script>
import Slider from '../base/slider'
import Scroll from '../base/scroll'
export default {
data () {
return {
slider: [
{url: 'http://upload-images.jianshu.io/upload_images/7932253-54c81df0beed405b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1080/q/50'},
{url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000004ERTpn1UBu2f.jpg?max_age=2592000&max_age=2592000'},
{url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M00000077s7P0HaZpc.jpg?max_age=2592000&max_age=2592000'},
{url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000001QL1Si05yMPq.jpg?max_age=2592000&max_age=2592000'},
{url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000002ke7OC3ooZ5g.jpg?max_age=2592000&max_age=2592000'},
],
su:[1,2,3,4,5,6,7,8,9,10,1,2,3,4,2,3,5,8,7,4,] }
},
methods: {
},
components: {
Slider,
Scroll
}
}
</script>
<style>
.slider-wrapper{
width: 100%;
position: relative;
overflow: hidden;
}
.scroll{
height: 500px;
}
</style>
注意点：
slider组件的父元素必须给他一个100%的宽度且定义overflow:hidden，否则整个页面会被撑开，整个页面都能横向滚动
scroll组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。
效果图如下：
总结
以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。
