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

本文链接：https://blog.csdn.net/weixin_43361722/article/details/130225704

该代码段描述了一个图片轮播组件的逻辑，包括在初始化时根据图片数量隐藏或显示箭头，以及在点击左右箭头时更新图片源和调整箭头的可见性状态。特别强调了在判断条件中避免使用连续比较的陷阱，以防止逻辑错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

大致逻辑：

初始化时判断length，当图片只有一张时，隐藏左右箭头；
当图片为最后一张，隐藏右箭头；
当图片为第一张，隐藏左箭头；

中间图片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