iniciado
Basado en el tiempo para lograr un extremo móvil presentación de desplazamiento vertical de mejor desplazamiento. Esta vez, seguir utilizándolo para lograr un desplazamiento horizontal - vista del carrusel de la asamblea. Presentación de la siguiente manera:
En primer lugar, vamos a resolver la demanda:
- rotación figura se puede realizar sobre la base de los espectáculos de datos de imagen una solicitud asincrónica a.
- Si es posible controlar la reproducción automática, ya sea en bucle, la reproducción automáticamente a intervalos.
- Se puede pedir a la página de reproducción actual.
simulacro de datos
Debido a que es una demo, un par de imágenes de Internet para encontrar escritos en formato JSON, los datos para los datos analógicos de interface. mock.js. aquí usados Axios. La instalación es la siguiente:
npm install mockjs
npm install --save axios vue-axios
axios mucho uso repetido, los datos simulados brevemente. En la carpeta de simulacro para colocar los nuevos archivos de datos JSON JSON carpeta. Nueva interfaz de exportación index.js. Se pueden utilizar los axios interfaz de petición.
[
"https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png",
"https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png",
"https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg"
]
const Mock = require('mockjs')
Mock.mock('/slider', 'get', require('./json/slider.json'))
componentes básicos: slider.vue
El carrusel conjunto de la figura abstracto, recibiendo isLoop, isAutoPlay, intervalo de propiedad de rotación de control de la fig. A partir de la secuencia de llamada montado manera de saber que la idea es
- setSliderWidth () Obtiene la primera capa y a continuación, la altura de paquete de imagen de visualización.
- initDots () array se coloca dot imágenes dispuestos de acuerdo con el número de sub-elementos capa envueltos.
- initSlider () inicializa mejor desplazamiento.
- autoPlay () Configuración de la reproducción automática.
<template>
<div class="slider-apply" ref="slider"> <!-- 显示层 -->
<div class="slider-group" ref="group"> <!-- 所有图片包裹层 -->
<slot></slot> <!-- 插槽显示图片内容 -->
</div>
<div class="dots"> <!-- 提示圆点 -->
<div class="dot" v-for="(item, index) in dots" :key="index" :class="currentIndex===index?'active':''"></div>
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import BScroll from 'better-scroll'
export default {
data () {
return {
dots: [],
currentIndex: 0 /* 当前页下标 */
}
},
props: {
isLoop: { /* 循环播放 */
type: Boolean,
default: true
},
isAutoPlay: { /* 自动播放 */
type: Boolean,
default: true
},
interval: { /* 播放间隔 */
type: Number,
default: 2000
}
},
mounted () { /* mounted阶段dom渲染完，20ms确保刷新 */
setTimeout(() => {
this.setSliderWidth()
this.initDots()
this.initSlider()
if (this.isAutoPlay) {
this.autoPlay()
}
}, 20)
},
methods: {
setSliderWidth () { /* 获取显示层宽度，计算内容层宽度 */
const clientWidth = this.$refs.slider.clientWidth
let sliderWidth = 0
this.children = this.$refs.group.children
for (let i = 0; i < this.children.length; i++) {
this.children[i].style.width = clientWidth + 'px'
sliderWidth += clientWidth
}
if (this.isLoop) { /* 循环播放需要增加前后两个宽度 */
sliderWidth += clientWidth * 2
}
this.$refs.group.style.width = sliderWidth + 'px' /* 设置内容层宽度 */
},
initDots () {
this.dots = new Array(this.children.length)
},
initSlider () {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true, /* 横向滚动 */
scrollY: false,
snap: { /* 循环滚动设置 */
loop: this.isLoop,
threshold: 0.3,
speed: 400
}
})
this.slider.on('scrollEnd', () => {
const pageIndex = this.slider.getCurrentPage().pageX /* 获取当前轮播页，用于圆点提示 */
this.currentIndex = pageIndex
if (this.isAutoPlay) {
clearTimeout(this.timer) /* 重新设置自动播放，否则无法自动播放 */
this.autoPlay()
}
})
},
autoPlay () {
this.timer = setTimeout(() => {
this.slider.next(400)
}, this.interval)
}
},
destroyed () { /* 确保清除定时器 */
clearTimeout(this.timer)
}
}
</script>
<style lang="stylus" scoped>
.slider-apply
position relative // 让dots找准位置
height 200px
width 100% // slider-apply会依据父元素宽度显示宽度
overflow hidden // 超出元素隐藏
border-radius 5px
.dots
position absolute
bottom 10px
left 50%
transform translate(-50%, 0) // 居中
display flex
.dot
margin 0 10px
height 7px
width 7px
background #fff
border-radius 50%
.active // 当前dot样式
width 15px
border-radius 50% 5px
</style>
Los componentes de aplicación: control deslizante-apply.vue
Puede Alider-apply.vue para acceder a la aplicación en sus propios proyectos.
<template>
<div class="slider-wrapper">
<Slider v-if="showSlider"> <!-- showSlider使得数据请求完成后再显示，否则better-scroll可能会计算错误 -->
<div v-for="item in imageList" :key="item" class="slider-item">
<img :src="item" class="img">
</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>
Si los pasos anteriores no comprenden, se puede encontrar el código fuente https://github.com/Gesj-yean/vue-demo-collection en mi github.
