更新记录

1.0.2（2024-06-16） 下载此版本

原来更新日志是这么用的，先这么着吧

1.0（2024-06-16） 下载此版本

初步整理更新

1.0.1（2024-06-16） 下载此版本

初步整理更新

平台兼容性

答题系统前端

https://static-mp-88553044-892e-43f8-abf1-4ebc42f49b88.next.bspapp.com/

答题系统后端

https://static-mp-88553044-892e-43f8-abf1-4ebc42f49b88.next.bspapp.com/admin/
账号：gly 密码：123456 大家可以自己新增看看效果，但是不能修改和删除

实现原理

轮播下面五个子元素无限循环（一开始试过三个，但是划快了会看到数据变化不及时，换成了五个），循环的时候，要永远确保当前数据的前后两个的数据都是最新的，所以下面在change事件中提前获取数据，e.getIndex就是要获取的数据的下标。然后在开头和结束的时候要进行判断，关闭轮播循环，并调整数据位置。

注意事项

当前数据的下标，指的是，正在展示的这条数据在数据库中的下标。
因为轮播有五个子元素，所以linkFun方法传入的数据列表也得是五条。

属性

事件

方法

<fljwz-swiper class="fljwzSwiper" ref="fljwzSwiperRef" height="600rpx" :length="listLength" @change="swiperChangeFun">
    <template v-slot="{item,index}">
        {{item}}
        <image class="logo" src="/static/logo.png"></image>
    </template>
</fljwz-swiper>

export default {
    data() {
        return {
            // 数据长度
            listLength: 999,
            // 当前数据的下标
            activeI: 6,
        }
    },
    onLoad() {
        let list = [];
        for (var i = 1; i <= this.listLength; i++) {
            list.push(i);
        }
        this.list = list;

        this.$nextTick(() => {
            let activeI = this.activeI;
            this.$refs.fljwzSwiperRef.getDataIndexFun(activeI).then((index) => {
                // 获取列表数据
                let listData = this.getListFun(index, 5);
                this.$refs.fljwzSwiperRef.linkFun(activeI, listData).then(() => {
                    console.log("跳转完成")
                })
            })
        })
    },
    methods: {
        getListFun(index, length) {
            return this.list.slice(index, index + length);
        },
        // 轮播下标改变时触发
        swiperChangeFun(e, callback) {
            // 当前数据的下标
            this.activeI = e.index;
            // 是否获取数据
            if (e.get) {
                // 获取数据
                let listData = this.getListFun(e.getIndex, 1);
                callback(listData[0]);
            }
        }
    }
}