每次我轮播图片时，整个数据大屏都会卡顿，具体代码修改分析一下

Question

 <div class="lunbo" @mouseenter="clear" @mouseleave="run">
            <div class="img">
                <img :src="dataList[currentIndex]" alt="" />
            </div>
 </div>
data() {
        return {
            dataList: [
                require('../assets/progressbar/p01.jpg'),
                require('../assets/progressbar/p02.jpg'),
                require('../assets/progressbar/p03.jpg'),
                require('../assets/progressbar/p04.jpg')
            ],
            currentIndex: 0, // 默认显示图片
            timer: null,// 定时器
}，
created() {
        this.run()
    },
    methods: {
        gotoPage(index) {
            this.currentIndex = index
        },
        next() {
            if (this.currentIndex === this.dataList.length - 1) {
                this.currentIndex = 0
            } else {
                this.currentIndex++
            }
        },
        up() {
            if (this.currentIndex === 0) {
                this.currentIndex = this.dataList.length - 1
            } else {
                this.currentIndex--
            }
        },
        clear() {
            clearInterval(this.timer)
        },
        // 定时器
        run() {
            this.timer = setInterval(() => {
                this.next()
            }, 400)
        }
}

每次我轮播图片时，整个数据大屏都会卡顿，具体代码修改分析一下

Answer 1

优化图片加载，使用懒加载或预加载，并限制同时加载的图片数量。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。