La lógica de cambiar entre los íconos izquierdo y derecho y la imagen del medio, error: no escribir consecutivamente si las condiciones de juicio

Insertar descripción de la imagen aquí

Lógica aproximada:

  1. La longitud se determina durante la inicialización: cuando solo hay una imagen, las flechas izquierda y derecha están ocultas;
  2. Cuando la imagen sea la última, oculte la flecha derecha;
  3. 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

Supongo que te gusta

Origin blog.csdn.net/weixin_43361722/article/details/130225704
Recomendado
Clasificación