<template> <div> <Slider v-if="showSlider"> <!-- showSlider使得数据请求完成后再显示，否则better-scroll可能会计算错误 --> <div v-for="item in imageList" :key="item"> <img :src="item"> </div> </Slider> </div> </template> <script type='text/ecmascript-6'> import Slider from 'base/slider' export default { data () { return { imageList: [], // 图片列表 showSlider: false // 显示slider标志位 } }, created () { this.getImages() // 获取数据 }, methods: { getImages () { this.axios.get('/slider').then((res) => { this.imageList = res.data this.showSlider = true }).catch((err) => { console.log(err) }) } }, components: { Slider } } </script> <style lang="stylus" scoped> .slider-wrapper margin 0 auto height 200px // 固定轮播图显示高度 width 500px // 固定轮播图显示宽度，可设置百分比 background #000 border-radius 5px .slider-item float left // 元素向左浮动 width 100% overflow hidden text-align center .img height 200px width 100% </style>
如果以上步骤没有看明白的话，可以在我的github中找到源码https://github.com/Gesj-yean/vue-demo-collection。
总结
到此这篇关于Vue中使用better-scroll实现轮播图组件的文章就介绍到这了,更多相关vue 轮播图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: