feats

src/components/List/index.jsx

@@ -1,35 +1,29 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import VirtualList from '@tarojs/components/virtual-list';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
 export default (props) => {
   const {
-    className,
-    height,
-    width = '100%',
-    itemHeight = 100,
     render,
     request,
     params,
     pageSize = 10,
-    onError
+    onError,
+    onDataChange,
+    ...leftProps
   } = props
 
   const loadingRef = useRef(false)
   const [payload, setPayload] = useState({})
   const [list, setList] = useState([])
-  const pageRef = useRef({ current: 1, total: 0 })
-
-  const dataLen = list.length
+  const pageRef = useRef({ current: 1, pages: 0 })
 
   // 滚动
-  const handleScroll = ({ scrollDirection, scrollOffset }) => {
+  const handleScrollToLower = (e) => {
     const loading = loadingRef.current
-    const isUping = scrollDirection === 'forward'
-    const canScroll = scrollOffset > ((dataLen - 5) * itemHeight + 100)
-    const hasMore = pageRef.current.current < pageRef.current.total
+    const hasMore = pageRef.current.current < pageRef.current.pages
 
-    if (!loading && isUping && canScroll && hasMore) {
+    if (!loading && hasMore) {
       setPayload({
         ...payload,
         pageNum: pageRef.current.current + 1
@@ -41,19 +35,24 @@ export default (props) => {
   useEffect(() => {
     setPayload({
       ...params,
-      pageNum: pageRef.current,
+      pageNum: 1,
       pageSize,
     })
   }, [pageSize, params])
 
-
   // 请求数据
   useEffect(() => {
     Taro.showLoading()
     loadingRef.current = true
     request(payload).then((res) => {
       const { records, ...pageInfo } = res || {}
-      setList(records || [])
+
+      const lst = pageInfo.current === 1 ? records || [] : list.concat(records || [])
+      setList(lst)
+      if (onDataChange) {
+        onDataChange(lst)
+      }
+
       pageRef.current = pageInfo
       loadingRef.current = false
       Taro.hideLoading()
@@ -67,17 +66,16 @@ export default (props) => {
     })
   }, [payload])
 
-  const Row = useMemo(render, [])
-
   return (
-    <VirtualList
-      className={className}
-      width={width}  
-      height={height}
-      itemData={list}
-      itemCount={dataLen}
-      itemSize={itemHeight}
-      onScroll={handleScroll}
-    >{Row}</VirtualList>
+    <ScrollView
+      scrollY
+      onScrollToLower={handleScrollToLower}
+      {...leftProps}
+    >
+      { !render
+          ? props.children
+          : list.map((item, index) => render({ item, index }))
+      }
+    </ScrollView>
   )
 }

src/pages/index/components/Card.js

@@ -10,20 +10,20 @@ import love from '@/assets/icons/housemantj/爱心.png'
 
 export default (props) => {
 
-  const { item } = props
+  const { item, style } = props
 
   const [isSaved, toggleSave] = useSave(item.isSaved, item.targetType, item.targetId)
   const Detail = () => {
     if (item.targetType == 'tourist') {
-      let location = item.lng + ',' + item.lat
-      Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}&distance=${(item.distance / 1000).toFixed(2)}&location=${location}` });
+      let loc = item.lng + ',' + item.lat
+      Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${item.targetId}&distance=${(item.distance / 1000).toFixed(2)}&location=${loc}` });
     }
     else {
       Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${item.targetId}` })
     }
   }
   return (
-    <view className='contentCard'>
+    <view className='contentCard' style={style}>
       <view className='cardTop'>
         <image mode='widthFix' onClick={Detail} src={item.poster} className='cCardimg' />
         <image className='lefttips' src={item.targetType === 'tourist' ? mjTip : msTip} />

src/pages/index/tabs/Recommend.jsx

@@ -3,6 +3,7 @@ import { React, useState, useEffect } from 'react'
 import iconsearch from '@/assets/icons/housemantj/search.png'
 import locationimg from '@/assets/icons/housemantj/location.png'
 import Tip from '@/components/tip'
+import List from '@/components/List';
 import { getIndexType,  getResourceList } from '@/services/home'
 import Card from '../components/Card'
 import './less/Recommend.less'
@@ -34,18 +35,18 @@ export default (props) => {
     }
   }
 
-  useEffect(() => {    
+  useEffect(() => {
     //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
       setTypeList(res.records || [])
     })    
   }, [])
 
-  useEffect(() => {
-      getResourceList(queryParams).then((res) => {
-        setAllList(res.records || [])
-      })
-    }, [queryParams])
+  // useEffect(() => {
+  //     getResourceList(queryParams).then((res) => {
+  //       setAllList(res.records || [])
+  //     })
+  //   }, [queryParams])
 
   const onSearch = () => {
     // 用绝对路径
@@ -53,7 +54,7 @@ export default (props) => {
   }
 
   return (
-    <view style={{ height: '100%', overflow: 'auto' }}>
+    <view style={{ height: '100%', overflow: 'hidden' }}>
       <view className='search' onClick={onSearch}>
         <input className='searchInput' disabled />
         <image className='searchicon' src={iconsearch} />
@@ -79,7 +80,20 @@ export default (props) => {
           </mp-tabs>
         </scroll-view>
       </view>
-      <scroll-view scroll-y='true' scroll-view='true'  	bindscrolltolower='lower' bindscrolltoupper='upper'	 bindscroll='scroll'
+
+      <List
+        style={{ height: 'calc(100% - 160px)' }}
+        request={getResourceList}
+        params={queryParams}
+        onDataChange={setAllList}
+      >
+        <view className='waterfall'>
+          {
+            alllist.map((item) => <Card key={item.resourceNo} item={item} />)
+          }
+        </view>
+      </List>
+      {/* <scroll-view scroll-y='true' scroll-view='true'  	bindscrolltolower='lower' bindscrolltoupper='upper'	 bindscroll='scroll'
       
       >
         <view className='waterfall'>
@@ -88,7 +102,7 @@ export default (props) => {
           }
         </view>
         <view className='botton'>已经到底了~</view>
-      </scroll-view>
+      </scroll-view> */}
     </view>
   )
 }