Lógica aproximada:
- La longitud se determina durante la inicialización: cuando solo hay una imagen, las flechas izquierda y derecha están ocultas;
- Cuando la imagen sea la última, oculte la flecha derecha;
- Cuando la imagen sea la primera, oculte la flecha izquierda;
La lista de URL de la imagen del medio se obtiene de los datos de la interfaz. Al hacer clic en los iconos izquierdo y derecho se activa la lógica de la siguiente manera:
// 点击左箭头
this.onclickLeft = e => {
let list = this.$model('imageList')
let nowUrl = this.$component('#image').$param('imageSrc')
let index = list.findIndex((e) => {
return e == nowUrl
})
index = index - 1
if(index === 0){
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(false)
this.$component('#rightArrow').$visible(true)
}else if(0 < index && index < (list.length-1)){
// 坑:注意不要连写为0<index<lengh
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(true)
this.$component('#rightArrow').$visible(true)
}else if(index === (list.length-1)){
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(true)
this.$component('#rightArrow').$visible(false)
}
}
// 点击右箭头
this.onclickRight = e => {
let list = this.$model('imageList')
let nowUrl = this.$component('#image').$param('imageSrc')
let index = list.findIndex((e) => {
return e == nowUrl
})
index = index + 1
if(index === 0){
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(false)
this.$component('#rightArrow').$visible(true)
}else if(0 < index && index < (list.length-1)){
// 坑:注意不要连写为0<index<lengh
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(true)
this.$component('#rightArrow').$visible(true)
}else if(index === (list.length-1)){
this.$component('#image').$param('imageSrc', list[index])
this.$component('#leftArrow').$visible(true)
this.$component('#rightArrow').$visible(false)
}
}
Errores: ¡tenga cuidado de no escribir condiciones de juicio consecutivas, 0 <índice && índice <(list.length-1)! ! !
// 连写问题:
1<3<3 // true
// 分开:
1<3 && 3<3 // false