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

<View wp="9" my={20} auto style={{ outline: '1px solid red' }}> <View plugin={{ name: 'list', value: 4, 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>

<View wp="9" my={20} auto style={{ outline: '1px solid red' }}>
  <View plugin={{ name: 'list', value: 4, 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>

Result

item1

item2

item3

item4

item5

item6

item7

item8