更新记录

1.0.2(2024-06-16) 下载此版本

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

1.0(2024-06-16) 下载此版本

初步整理更新

1.0.1(2024-06-16) 下载此版本

初步整理更新

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

答题系统前端

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方法传入的数据列表也得是五条。

属性

参数 说明 类型 可选值 默认值
height 轮播高度 string -- calc(100vh - var(--window-top))
length 数据长度(轮播长度) Number -- 0

事件

事件名 说明 参数
change 轮播下标改变时触发,e.index代表当前数据的下标,e.get代表是否获取数据(布尔值),e.getIndex代表要获取数据的下标,如果需要获取数据,获取到数据后将数据作为参数传入callback event,callback

方法

方法名 说明 参数
nextFun 自动播放下一张,答题正确可调用此方法自动下一题 --
getDataIndexFun 如果不知道获取数据的时候从哪个下标开始,可以用这个,传入当前数据的下标,返回要获取的数据的开始下标 index:Number
linkFun 用于初始化和跳转,获取到数据后,调用这个方法,传入当前数据的下标和数据列表 index:Number,dataList:Array
<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]);
            }
        }
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问