支付寶小程序引導(dǎo)組件 遮罩引導(dǎo)·Guide

用于引導(dǎo)新用戶或者頁面內(nèi)的新功能使用說明。

掃碼體驗

示例代碼

{


 "defaultTitle": "Guide",


 "usingComponents":{


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


 }


}

<guide
  show="{{guideShow}}"
  hasJump="{{guideJump}}"
  guideList="{{list}}"
  btn_next="看下一張引導(dǎo)圖"
  btn_jump="直接關(guān)閉，不看跳過"
  btn_over="看完了????啊"
  onGuideOver="closeGuide"
  maskClick="{{true}}"
></guide>


<button size="default" type="primary" onTap="onShowJumpGuide">查看可跳過的引導(dǎo)圖</button>
<button size="default" type="primary" onTap="onShowGuide">查看普通的引導(dǎo)圖</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 引導(dǎo)中的按鈕只會顯示一個 btn_next 按鈕；
• onGuideOver 事件主要是用于控制當(dāng) guide 引導(dǎo)結(jié)束后或者當(dāng)有跳過按鈕出現(xiàn)時，點擊按鈕關(guān)閉 guide 引導(dǎo)的，如有必要也可以自行再添加事件；
• guideList 是用于控制顯示每頁 guide 引導(dǎo)圖片的內(nèi)容、位置以及大小等；
• 數(shù)組中的格式：[{ url: '', x: '', y: '', width: '', height: '',},]；
  • url：guide 引導(dǎo)圖的 url；
  • x：引導(dǎo)圖在可視區(qū)域的 x 坐標(biāo)位置；
  • y：引導(dǎo)圖在可視區(qū)域的 y 坐標(biāo)位置；
  • width：引導(dǎo)圖的寬度；
  • height：引導(dǎo)圖的高度。