左右icon切换中间图片逻辑,坑:if判断条件不要连写

在这里插入图片描述

大致逻辑:

  1. 初始化时判断length,当图片只有一张时,隐藏左右箭头;
  2. 当图片为最后一张,隐藏右箭头;
  3. 当图片为第一张,隐藏左箭头;

中间图片url列表从接口数据中获取,点击左右icon触发逻辑如下:

// 点击左箭头
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)
    }
}

坑:if的判断条件要注意不要连写,0 < index && index < (list.length-1)!!!

// 连写问题:
1<3<3 // true
// 分开:
1<3 && 3<3 // false

猜你喜欢

转载自blog.csdn.net/weixin_43361722/article/details/130225704