忽然笑
2022-07-08 18:30:08
我有一個動態(tài)列表,其中包含使用 flex-wrap 連續(xù)呈現(xiàn)的文本(例如標簽)。我想在所有項目之間添加一個項目符號分隔符,每行中的最后一個除外。例如,假設(shè)我有 list ['apple', 'peach', 'orange', 'watermelon', 'pear']。根據(jù)屏幕大小,我希望它們以行和小子彈的形式呈現(xiàn)。蘋果?桃?橙西瓜?梨如您所見,只有一行的元素之間會有兩行和項目符號?,F(xiàn)在,我可以使用index它來檢查它是否是列表中的最后一個元素, arr.map((i, index) => index < arr.length-1 && <View>...</View>)但我在第一行中的最后一個元素之后得到一個項目符號蘋果 ? 桃子 ? 橙子 ?西瓜?梨這不是我想要的?,F(xiàn)在假設(shè)我有更長的項目名稱,并且第一行只呈現(xiàn)了其中兩個,我想要相同的效果,最后沒有項目符號。有人可以幫我檢測一行中的最后一個元素。這是我的代碼示例。<View style={styles.section}> { tags.map((tag, index) => ( <View key={tag.id} style={styles.tagItem}> <Text style={styles.tagTitle}>{tag.title}</Text> {index < tags.length - 1 && <Text>?</Text>} </View> )) }</View>這是我的樣式對象:{ section: { flexDirection: 'row', flexWrap: 'wrap', }, tagItem: { paddingHorizontal: 5, flexDirection: 'row', },}
3 回答

一只斗牛犬
TA貢獻1784條經(jīng)驗 獲得超2個贊
你可以用這個 css 技巧做到這一點:li + li::before
.list {
list-style: none;
display: flex;
}
li span {
padding: 20px
}
li + li::before {
content: "\02022"
}
<ul class="list">
<li>
<span>Apple</span>
</li>
<li>
<span>Banana</span>
</li>
<li>
<span>Peach</span>
</li>
</ul>
添加回答
舉報
0/150
提交
取消