更新记录

1.0.1(2022-11-11)

修改文档描述

1.0.0(2022-11-11)

初次版本发布


平台兼容性

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

m-start-ad

快速制作一个自定义开屏广告,支持轮播

属性说明

属性名 类型 默认值 必填 说明
list Array [] true 开屏图片列表
hasTabbar Boolean false false 页面存在原生tabbar,组件会自动判断隐藏tabbar
hasNavbar Boolean false false 页面是否包含navbar
interval Number 3000 false 轮播自动播放时间(多图时可用)
time Number 3 false 倒计时跳过
url String '' false 时间倒计时结束后跳转地址,如果是tabbar页面,可为空
bgColor String '#BB1219' false 页面的背景颜色, 开屏图片为自动垂直居中,在大屏幕手机下,有些时候高度不够的情况下,会造成上下留白,使用此属性可以填充背景色
afterColor String '' false 页面底部背景色填充,有些时候设置会设计渐变色图片,如果只使用bgcolor无法解决需求,此时定义此属性,可在最下面填充颜色,以达到颜色过度效果
currentColor String '#BB1219' false 定义dot当前状态颜色, list长度大于1可见

如何做自定义开屏界面

方式一

1、新建一个新页面 pages/start 2、修改pages.js配置文件,把start地址放在最前

{
    "pages": [ 
        {
            "path" : "pages/start", //page第一页就是开屏第一个页面
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "navigationStyle": "custom"  //取消默认导航做到满屏效果
            }

        }
    ]
}

3、页面引入组件,传入list, url

使用方式

<template>
    <m-start-ad :list="list" url="pages/index/index" />
</template>

方式二

1、页面关闭原生导航

{
    "pages": [ 
        {
            "path" : "pages/index/index", 
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "navigationStyle": "custom"  //取消默认导航做到满屏效果
            }

        }
    ]
}

1、页面直接使用

<m-start-ad :list="list" />

2、倒计时结束后,自动隐藏组件(无需操作)

方式对比

对比 优点 缺点
方式一 所有页面都可以公用 如果内页需要tabbar,需要自定义
方式二 按需配置 无法控制navbar,需要自定义

隐私、权限声明

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

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

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

许可协议

MIT协议

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