list

插件名

list

安装

npm

npm install @jswork/styled-plugin-list

Yarn

yarn add @jswork/styled-plugin-list

参数

名称	类型	description
value	number	每行展示的个数
width	number	每个 item 的宽度
gap	number	向下的空隙值

绝对居中的一种实现方式。

原理

1. 利用 value/width 计算出每行的参数
2. 每列的最右边 margin-right:0;
3. 每个 list 的最后一排， margin-bottom:0;

用法

<View wp="9" my={20} auto style={{ outline: '1px solid red' }}>  <View plugin={{ name: 'list', value: 6, width: 160, gap: 20 }}>    <View bg="#eee" h={100} className="is-item">      item1    </View>    <View bg="#f30" h={100} className="is-item">      item2    </View>    <View bg="#ddd" h={100} className="is-item">      item3    </View>    <View bg="#030" h={100} className="is-item">      item4    </View>    <View bg="#ddd" h={100} className="is-item">      item5    </View>    <View bg="#ccc" h={100} className="is-item">      item6    </View>    <View bg="#999" h={100} className="is-item">      item7    </View>    <View bg="#505" h={100} className="is-item">      item8    </View>  </View></View>

演示

Live Editor

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^