|
|
@@ -48,6 +48,8 @@ export default function Journal() {
|
|
|
const { t } = useTranslation()
|
|
|
const [pageTop, setPageTop] = useState(0)
|
|
|
|
|
|
+ const query = Taro.createSelectorQuery()
|
|
|
+
|
|
|
let router
|
|
|
let navigation;
|
|
|
if (useNavigation) {
|
|
|
@@ -66,11 +68,11 @@ export default function Journal() {
|
|
|
|
|
|
const [showTip, setShowTip] = useState(router.params.show_tip == '1')
|
|
|
|
|
|
- useEffect(()=>{
|
|
|
- return ()=>{
|
|
|
+ useEffect(() => {
|
|
|
+ return () => {
|
|
|
myScrollTop = 0
|
|
|
}
|
|
|
- },[])
|
|
|
+ }, [])
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
@@ -82,7 +84,7 @@ export default function Journal() {
|
|
|
setTimeout(() => {
|
|
|
// console.log('journals length', journals.length)
|
|
|
measureItemLayouts()
|
|
|
- }, 500)
|
|
|
+ }, 300)
|
|
|
}
|
|
|
}, [journals])
|
|
|
|
|
|
@@ -140,28 +142,43 @@ export default function Journal() {
|
|
|
}
|
|
|
|
|
|
function measureItemLayouts() {
|
|
|
- const query = Taro.createSelectorQuery()
|
|
|
- journals.forEach((item, index) => {
|
|
|
- // if (index >= itemLayouts.length) {
|
|
|
- query.select(`#history-${index}`).boundingClientRect()
|
|
|
- // }
|
|
|
-
|
|
|
- });
|
|
|
- query.exec((res) => {
|
|
|
-
|
|
|
- var layouts: any = []
|
|
|
- var heights: any = []
|
|
|
- res.forEach((rect, index) => {
|
|
|
- if (rect) {
|
|
|
- layouts[index] = rect.top + myScrollTop
|
|
|
- heights[index] = rect.height
|
|
|
+
|
|
|
+ if (journals.length <= 10) {
|
|
|
+ journals.forEach((item, index) => {
|
|
|
+ query.select(`#history-${index}`).boundingClientRect()
|
|
|
+ });
|
|
|
+ query.exec((res) => {
|
|
|
+ var layouts: any = []
|
|
|
+ var heights: any = []
|
|
|
+ res.forEach((rect, index) => {
|
|
|
+ if (rect) {
|
|
|
+ layouts[index] = rect.top + myScrollTop
|
|
|
+ heights[index] = rect.height
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setItemHeights(heights)
|
|
|
+ setItemLayouts(layouts)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ journals.forEach((item, index) => {
|
|
|
+ if (index >= itemLayouts.length) {
|
|
|
+ query.select(`#history-${index}`).boundingClientRect()
|
|
|
}
|
|
|
});
|
|
|
- setItemHeights(heights)
|
|
|
- setItemLayouts(layouts)
|
|
|
- // setItemLayouts([...itemLayouts, ...layouts])
|
|
|
- // setItemHeights([...itemHeights, ...heights])
|
|
|
- })
|
|
|
+ query.exec((res) => {
|
|
|
+ var layouts: any = []
|
|
|
+ var heights: any = []
|
|
|
+ res.forEach((rect, index) => {
|
|
|
+ if (rect) {
|
|
|
+ layouts[index] = rect.top + myScrollTop
|
|
|
+ heights[index] = rect.height
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setItemLayouts([...itemLayouts, ...layouts])
|
|
|
+ setItemHeights([...itemHeights, ...heights])
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function onScroll(e) {
|
|
|
@@ -407,19 +424,18 @@ export default function Journal() {
|
|
|
|
|
|
function itemData(index, item) {
|
|
|
if (itemLayouts.length >= index + 1 && pageTop > 0) {
|
|
|
- if (Math.abs(itemLayouts[index] - pageTop) > 3000) {
|
|
|
- return <View style={{ height: itemHeights[index] }} id={`history-${index}`}>
|
|
|
- {/* {index} */}
|
|
|
+ if (Math.abs(itemLayouts[index] - pageTop) > 1500) {
|
|
|
+ return <View style={{ height: itemHeights[index] }} id={`history-empty-${index}`}>
|
|
|
</View>
|
|
|
}
|
|
|
- if (Math.abs(itemLayouts[index] - pageTop) > 1500) {
|
|
|
+ if (Math.abs(itemLayouts[index] - pageTop) > 1000) {
|
|
|
return <View style={{
|
|
|
height: itemHeights[index], display: 'flex',
|
|
|
paddingLeft: rpxToPx(40),
|
|
|
paddingRight: rpxToPx(40),
|
|
|
boxSizing: 'border-box',
|
|
|
flexDirection: 'row'
|
|
|
- }} id={`history-${index}`}>
|
|
|
+ }} id={`history-empty-${index}`}>
|
|
|
<TimelineDate
|
|
|
timestamp={item.timestamp}
|
|
|
pre_timestamp={index > 0 ? journals[index - 1].timestamp : null}
|
|
|
@@ -456,11 +472,11 @@ export default function Journal() {
|
|
|
// console.log(journals.length, itemLayouts, pageTop)
|
|
|
|
|
|
|
|
|
- return <StickyDateList
|
|
|
- // onRefresherRefresh={() => {
|
|
|
- // setIsPulling(true)
|
|
|
- // getJounalsData(1)
|
|
|
- // }} isPulling={isPulling}
|
|
|
+ return <StickyDateList
|
|
|
+ // onRefresherRefresh={() => {
|
|
|
+ // setIsPulling(true)
|
|
|
+ // getJounalsData(1)
|
|
|
+ // }} isPulling={isPulling}
|
|
|
onScroll={onScroll}
|
|
|
showDate={showDate}
|
|
|
date={date}
|