mirror of
https://github.com/ikun0014/lx-music-mobile.git
synced 2025-07-03 21:42:10 +08:00
优化歌单列表歌单封面大小计算方式
This commit is contained in:
parent
9169b65a57
commit
ec6dce2991
@ -1,3 +1,7 @@
|
|||||||
|
### 优化
|
||||||
|
|
||||||
|
- 优化歌单列表歌单封面大小计算方式
|
||||||
|
|
||||||
### 修复
|
### 修复
|
||||||
|
|
||||||
- 修复wy歌单分类切换无效的问题
|
- 修复wy歌单分类切换无效的问题
|
||||||
|
@ -58,7 +58,7 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
|
|||||||
<ListItem
|
<ListItem
|
||||||
item={item}
|
item={item}
|
||||||
index={index}
|
index={index}
|
||||||
width={itemWidth}
|
width={rowInfo.width}
|
||||||
showSource={showSource}
|
showSource={showSource}
|
||||||
onPress={onOpenDetail}
|
onPress={onOpenDetail}
|
||||||
/>
|
/>
|
||||||
@ -103,20 +103,30 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
|
|||||||
// let itemWidth = Math.max(Math.trunc(width * 0.125), MAX_WIDTH)
|
// let itemWidth = Math.max(Math.trunc(width * 0.125), MAX_WIDTH)
|
||||||
// // if (itemWidth < )
|
// // if (itemWidth < )
|
||||||
// }, [width])
|
// }, [width])
|
||||||
const itemWidth = useMemo(() => {
|
// const computedItemWidth = useMemo(() => {
|
||||||
let w = width * 0.9 - GAP
|
// let w = width - GAP
|
||||||
let n = width / (MIN_WIDTH + GAP)
|
// let n = width / (MIN_WIDTH + GAP)
|
||||||
if (n > 10) n = 10
|
// if (n > 10) n = 10
|
||||||
return Math.floor(w / n)
|
// return Math.floor(w / n)
|
||||||
}, [width])
|
// }, [width])
|
||||||
// console.log(Math.trunc(width * 0.125), itemWidth)
|
// console.log(Math.trunc(width * 0.125), itemWidth)
|
||||||
// console.log(itemWidth, MIN_WIDTH, GAP, width)
|
// console.log(itemWidth, MIN_WIDTH, GAP, width)
|
||||||
const rowNum = useMemo(() => Math.max(Math.floor(width / itemWidth), 2), [itemWidth, width])
|
const rowInfo = useMemo(() => {
|
||||||
|
let w = width - GAP
|
||||||
|
let n = width / (MIN_WIDTH + GAP)
|
||||||
|
if (n > 10) n = 10
|
||||||
|
let computedItemWidth = Math.floor(w / n)
|
||||||
|
const num = Math.max(Math.floor(width / computedItemWidth), 2)
|
||||||
|
return {
|
||||||
|
num,
|
||||||
|
width: (width - GAP) / num,
|
||||||
|
}
|
||||||
|
}, [width])
|
||||||
// console.log(rowNum)
|
// console.log(rowNum)
|
||||||
const list = useMemo(() => {
|
const list = useMemo(() => {
|
||||||
const list = [...currentList]
|
const list = [...currentList]
|
||||||
let whiteItemNum = (list.length % rowNum)
|
let whiteItemNum = (list.length % rowInfo.num)
|
||||||
if (whiteItemNum > 0) whiteItemNum = rowNum - whiteItemNum
|
if (whiteItemNum > 0) whiteItemNum = rowInfo.num - whiteItemNum
|
||||||
for (let i = 0; i < whiteItemNum; i++) {
|
for (let i = 0; i < whiteItemNum; i++) {
|
||||||
list.push({
|
list.push({
|
||||||
id: `white__${i}`,
|
id: `white__${i}`,
|
||||||
@ -130,7 +140,7 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
return list
|
return list
|
||||||
}, [currentList, rowNum])
|
}, [currentList, rowInfo])
|
||||||
// console.log(listInfo.list.map((item) => item.id))
|
// console.log(listInfo.list.map((item) => item.id))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -140,11 +150,11 @@ export default forwardRef<ListType, ListProps>(({ onRefresh, onLoadMore, onOpenD
|
|||||||
? null
|
? null
|
||||||
: (
|
: (
|
||||||
<FlatList
|
<FlatList
|
||||||
key={String(rowNum)}
|
key={String(rowInfo.num)}
|
||||||
ref={flatListRef}
|
ref={flatListRef}
|
||||||
style={styles.list}
|
style={styles.list}
|
||||||
columnWrapperStyle={{ justifyContent: 'space-evenly' }}
|
columnWrapperStyle={{ justifyContent: 'space-evenly' }}
|
||||||
numColumns={rowNum}
|
numColumns={rowInfo.num}
|
||||||
data={list}
|
data={list}
|
||||||
maxToRenderPerBatch={4}
|
maxToRenderPerBatch={4}
|
||||||
// updateCellsBatchingPeriod={80}
|
// updateCellsBatchingPeriod={80}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user