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
{
"defaultTitle": "Guide",
"usingComponents":{
"guide": "mini-ali-ui/es/guide/index"
}
}
.axml
<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
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 |
btn_jump | String | No | Text on the button that allows users to skip the step. The default value is |
| btn_over | String | No | Text on the button that is displayed on the last page. The default value is |
| hasJump | Boolean | No | An indicator of whether to display the skip button. The default value is |
| show | Boolean | No | An indicator of whether to use a mask. The default value is |
| 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 |
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