Alphabet

2021-07-06 11:36

You can use the alphabet component to arrange content in the alphabetical order.

Sample code

.json

copy

{
  "defaultTitle": "Alphabet",
  "usingComponents":{
    "alphabet": "mini-ali-ui/es/list/alphabet/index",
    "am-icon": "mini-ali-ui/es/am-icon/index"
  }
}

.axml

copy

<view style="position: relative; height: 100vh;">
 <alphabet alphabet="{{alphabet}}" onClick="onAlphabetClick" >
 	<view slot="prefix"><am-icon size="12" type="check_"/></view>
 </alphabet>
</view>

.js

copy

Page({
  data: {
    alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  },
  onAlphabetClick(ev) {
    my.alert({
      content: JSON.stringify(ev.data),
    });
  },
});

Parameters

Property	Type	Description
alphabet	Array	The alphabet that consists of letters.

Note:

The content is displayed by using the list component.