更新记录

1.0.1(2020-09-17)

2020-9-17:添加自动翻页功能

1.0.0(2020-09-16)

实现手动翻页效果 自动翻页后续添加

查看更多

cs_pageTurning 翻页轮播

在页面script中引入组件,并注册组件

import pageTurning from "@/components/cs-pageTurning/cs-pageTurning.vue"
export default {
    components: {pageTurning}
}

示例

<pageTurning  ref="pageTurning" :height="440" :autoplay="autoplay" :imgList="bannerList"></pageTurning>

属性

名称 类型 默认值 描述
height Number 500 高度
imgList Array {imgSrc:图片地址}
autoplay Boolean false 是否开启自动轮播
interval Number 5000 轮播间隔时间(单位:微秒)

方法

nextPage() 下一页

creatTimer() 重新开启自动翻页

deleteTimer() 清除定时器 关闭自动翻页

优化

如果组件放在 tab页上 可在onshow() onhide() 上调用 开始定时器 creatTimer() 和 删除定时器 deleteTimer() 优化性能

(){
    console.log("创建定时器")
    console.log(self.$refs['pageTurning']);
    if(self.autoplay && self.$refs['pageTurning']){
        self.$refs['pageTurning'].creatTimer();
    }       
},
onHide(){
    console.log("删除定时器");
    console.log(self.$refs['pageTurning']);
    if(self.$refs['pageTurning']){
        self.$refs['pageTurning'].deleteTimer();
    }
},

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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