Guide

You can use the guide component to teach users to use features on a mask.

Sample Code

See the sample codes in different languages:

.json

copy
{

 "defaultTitle": "Guide",

 "usingComponents":{

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

 }

}

.axml

copy
<guide
  show="{{guideShow}}"
  hasJump="{{guideJump}}"
  guideList="{{list}}"
  btn_next="Next step"
  btn_jump="Close or Skip"
  btn_over="Finish"
  onGuideOver="closeGuide"
  maskClick="{{true}}"
></guide>

<button size="default" type="primary" onTap="onShowJumpGuide">Guidance that users can skip steps</button>
<button size="default" type="primary" onTap="onShowGuide">General guidance</button>

.js

copy
Page({

 data: {

   list: [

     {

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

       x: '150rpx',

       y: '100rpx',

       width: '200px',

       height: '300px',

     },

     {

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

       x: '250rpx',

       y: '50rpx',

       width: '200px',

       height: '100px',

     },

     {

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

       x: '350rpx',

       y: '200rpx',

       width: '100px',

       height: '300px',

     },

     {

       url: 'https://example.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,

   });

 },

});

Parameters

Property

Type

Required

Description

btn_next

String

No

Text on the button that guides users to the next step. The default value is Next step.

btn_jump

String

No

Text on the button that allows users to skip the step. The default value is Skip.

btn_over

String

No

Text on the button that is displayed on the last page. The default value is OK.

hasJump

Boolean

No

An indicator of whether to display the skip button. The default value is false.

show

Boolean

No

An indicator of whether to use a mask. The default value is false.

guideList

Array

Yes

Content of each step. The default value is [].

onGuideOver

EventHandle

No

The event that is triggered when users skip or close the guidance. The default value is () => { }.

maskClick

Boolean

No

An indicator of whether to trigger an event when users click the mask. The default value is false.

Notes:

  • If the value of hasJump is false, users cannot skip steps.
  • Use guideList to control content, position, and size of the image in each step. The type of guideList is array and the format is [{ url: '', x: '', y: '', width: '', height: '',},]:
    • url: image URL
    • x: x coordinate of the image
    • y: y coordinate of the image
    • width: image width
    • height: image height