支付宝小程序引导组件 遮罩引导·Guide

用于引导新用户或者页面内的新功能使用说明。

扫码体验

示例代码

{


 "defaultTitle": "Guide",


 "usingComponents":{


   "guide": "mini-ali-ui/es/guide/index"


 }


}

<guide
  show="{{guideShow}}"
  hasJump="{{guideJump}}"
  guideList="{{list}}"
  btn_next="看下一张引导图"
  btn_jump="直接关闭，不看跳过"
  btn_over="看完了????啊"
  onGuideOver="closeGuide"
  maskClick="{{true}}"
></guide>


<button size="default" type="primary" onTap="onShowJumpGuide">查看可跳过的引导图</button>
<button size="default" type="primary" onTap="onShowGuide">查看普通的引导图</button>

Page({


 data: {


   list: [


     {


       url: 'https://gw.alipayobjects.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',


       x: '150rpx',


       y: '100rpx',


       width: '200px',


       height: '300px',


     },


     {


       url: 'https://gw.alipayobjects.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',


       x: '250rpx',


       y: '50rpx',


       width: '200px',


       height: '100px',


     },


     {


       url: 'https://gw.alipayobjects.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',


       x: '350rpx',


       y: '200rpx',


       width: '100px',


       height: '300px',


     },


     {


       url: 'https://gw.alipayobjects.com/as/g/dnestFEGroup/dnestCompetFE/0.3.54/public/ii_bg1.49350b69.jpg',


       x: '400rpx',


       y: '200rpx',


       width: '200rpx',


       height: '300rpx',


     },


   ],


 },


 onLoad() {},


 closeGuide() {


   this.setData({


     guideShow: false,


   });


 },


});

属性

Bug & Tip

• hasJump 如为 false，guide 引导中的按钮只会显示一个 btn_next 按钮；
• onGuideOver 事件主要是用于控制当 guide 引导结束后或者当有跳过按钮出现时，点击按钮关闭 guide 引导的，如有必要也可以自行再添加事件；
• guideList 是用于控制显示每页 guide 引导图片的内容、位置以及大小等；
• 数组中的格式：[{ url: '', x: '', y: '', width: '', height: '',},]；
  • url：guide 引导图的 url；
  • x：引导图在可视区域的 x 坐标位置；
  • y：引导图在可视区域的 y 坐标位置；
  • width：引导图的宽度；
  • height：引导图的高度。