/
index.js
114 lines (107 loc) · 3.33 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtGrid } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'
export default class GridPage extends Taro.Component {
config = {
navigationBarTitleText: 'Taro UI'
}
constructor () {
super(...arguments)
this.state = {
data: [
{
image:
'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
value: '领取中心'
},
{
image:
'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
value: '找折扣'
},
{
image:
'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
value: '领会员'
},
{
image:
'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
value: '新品首发'
},
{
image:
'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
value: '领京豆'
},
{
value: '支持Icon',
iconInfo: {
size: 30,
color: 'red',
value: 'bookmark'
}
}
]
}
}
handleClick = (value, index) => {
console.log(value, index)
}
render () {
return (
<View className='page'>
<DocsHeader title='Grid 栅格' />
<View className='doc-body'>
<View className='panel'>
<View className='panel__title'>正方形案例</View>
<View className='panel__content'>
<View className='example-item'>
<AtGrid data={this.state.data} onClick={this.handleClick} />
</View>
</View>
</View>
<View className='panel'>
<View className='panel__title'>矩形案例</View>
<View className='panel__content'>
<View className='example-item'>
<AtGrid
mode='rect'
data={[
...this.state.data,
{
image:
'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
value: '手机馆'
}
]}
/>
</View>
</View>
</View>
<View className='panel'>
<View className='panel__title'>没有边框</View>
<View className='panel__content'>
<View className='example-item'>
<AtGrid
mode='rect'
data={[
...this.state.data,
{
image:
'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
value: '手机馆'
}
]}
hasBorder={false}
/>
</View>
</View>
</View>
</View>
</View>
)
}
}