更新记录

1.0.3(2021-07-04) 下载此版本

bugfix

1.0.2(2021-07-04) 下载此版本

支持获取子组件容器

1.0.1(2021-07-04) 下载此版本

mask-guide-uni

基于uni-app的引导组件

目前仅支持微信小程序平台,其它平台未作测试和兼容

1.0.0 (2021-07-04)


效果图

目标容器

  • 通过 id="guide_顺序 实现引导顺序
  • data-guide-text 属性设置提示文字
<view id="guide_0" data-guide-text="提示1"></view>
<view id="guide_1" data-guide-text="提示2"></view>

组件使用方法

  • 调用start()方法
  • 通过slot='nextButton'可自定义 下一步 按钮
<mask-guide-uni ref="maskGuide">
  <view slot='nextButton'>我知道啦~</view>
</mask-guide-uni>

this.$refs.maskGuide.start({
  textStyle:{
    fontSize: '24rpx',
  },
  showNextButton: false
})

start参数说明

字段 是否必须 类型 默认值 说明
textStyle Object {} 提示文字样式
showNextButton Boolean true 是否显示 '我知道啦' 按钮
查看更多

平台兼容性

mask-guide-uni

基于uni-app的引导组件

目前仅支持微信小程序平台,其它平台未作测试和兼容

1.0.2 (2021-07-04)


更新内容 支持获取子组件容器

效果图

目标容器

  • 最外层容器添加 id="guide-container"
  • 通过 id="guide_顺序 实现引导顺序
  • data-guide-text 属性设置提示文字
<view id="guide-container">
  <view id="guide_0" data-guide-text="提示1"></view>
  <view id="guide_1" data-guide-text="提示2"></view>
</view>

组件使用方法

  • 调用start()方法
  • 通过slot='nextButton'可自定义 下一步 按钮
<mask-guide-uni ref="maskGuide">
  <view slot='nextButton'>我知道啦~</view>
</mask-guide-uni>

this.$refs.maskGuide.start({
  textStyle:{
    fontSize: '24rpx',
  },
  showNextButton: false
})

start参数说明

字段 是否必须 类型 默认值 说明
textStyle Object {} 提示文字样式
showNextButton Boolean true 是否显示 '我知道啦' 按钮

码云仓库 https://gitee.com/wy5151/mask-guide-uni/tree/master

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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