feat: listView&LazyBlock增加 lazyStorage参数用于区分listView

Rahim-Chan · May 12, 2020 · e01fbfd · e01fbfd
1 parent 585226e
commit e01fbfd
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@
 | needInit   | 初始化&自动调用下拉刷新方法   | boolean | - | - |
 | distanceToRefresh   | 下拉刷新距离    | number | - | - |
 | damping   | 最大下拉距离    | number | - | - |
+| lazyStorage   | Storage Key值用于区分ListView    | string | box | - |
 
 
 ### 自定义页面UI（状态提示语，空白屏、错误屏、底部状态的UI自定义）
@@ -139,11 +140,12 @@ export default class Index extends Component {
             isEmpty={isEmpty}
             onPullDownRefresh={fn => this.pullDownRefresh(fn)}
             onScrollToLower={this.onScrollToLower}
+            lazyStorage='ListView'
           >
             {list.map((item, index) => {
               return (
                   <View className='item skeleton-bg' key={index}>
-                    <LazyBlock current={index} className='avatar'>
+                    <LazyBlock current={index} className='avatar' lazyStorage='ListView'>
                       <Image className='avatar skeleton-radius' src={item.author.avatar_url} />
                     </LazyBlock>
                     <View className='title skeleton-rect'>
@@ -172,6 +174,7 @@ export default class Index extends Component {
 | 属性 | 说明                | 类型   |默认值   |必传   |
 | :------- | :---------------  | :--------- |:--------- |:--------- |
 | current   | 传入模块遍历后的下标    | number | null | true |
+| lazyStorage   | Storage Key值用于区分ListView(获取是哪一个ListView)    | string | box | - |
 
 ```jsx
 import Taro, {Component} from '@tarojs/taro';
@@ -225,11 +228,12 @@ export default class Index extends Component {
           hasMore={hasMore}
           style={{height: '100vh'}}
           onScrollToLower={this.onScrollToLower}
+          lazyStorage='lazyViewBlock'
         >
           {list.map((item, index) => {
             return (
               <View className='item' key={index}>
-                <LazyBlock current={index} className='avatar'>
+                <LazyBlock current={index} className='avatar' lazyStorage='lazyViewBlock'>
                   <Image className='avatar' src={item.author.avatar_url} />
                 </LazyBlock>
                 <View className='title'>

diff --git a/src/app.tsx b/src/app.tsx
@@ -37,10 +37,18 @@ class App extends Component {
    * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
    * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
    */
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
   config: Config = {
     pages: [
-      'pages/index/index',
       'pages/index',
+      'pages/index/index',
       'pages/index/lazy',
       'pages/skeleton/index'
     ],
@@ -52,14 +60,6 @@ class App extends Component {
     }
   }
 
-  componentDidMount () {}
-
-  componentDidShow () {}
-
-  componentDidHide () {}
-
-  componentDidCatchError () {}
-
   // 在 App 类中的 render() 函数没有实际作用
   // 请勿修改此函数
   render () {

diff --git a/src/components/list-view/block.tsx b/src/components/list-view/block.tsx
@@ -18,6 +18,7 @@ interface State {
 interface Props {
   className?: string;
   current: number;
+  lazyStorage?: string;
 }
 
 class LazyImage extends Component<Props, State> {
@@ -33,8 +34,13 @@ class LazyImage extends Component<Props, State> {
     scrollCur: [0]
   };
 
+  static defaultProps = {
+    lazyStorage: 'box'
+  };
+
   componentDidMount() {
-    this.lazyItem = storage.get('lazyBox')[storage.get('lazyBox').length -1];
+    const { lazyStorage } = this.props;
+    this.lazyItem = storage.get(`lazyBox_${lazyStorage}`)[storage.get(`lazyBox_${lazyStorage}`).length -1];
     this.bindTextListener();
   }
 

diff --git a/src/components/list-view/index.tsx b/src/components/list-view/index.tsx
@@ -19,7 +19,8 @@ class ListView extends Component<Props, State> {
   lazyKey = (
     () => {
       if (this.props.lazy) {
-        return  tools.lazyScrollInit(this.lazyClassName)
+        const { lazyStorage } = this.props;
+        return tools.lazyScrollInit(this.lazyClassName, lazyStorage)
       }
     }
   )();
@@ -49,15 +50,18 @@ class ListView extends Component<Props, State> {
         .select('.scrollView')
         .boundingClientRect()
         .exec(res => {
-          tools.updateScrollHeight(this.lazyKey, res[0].height)
+          const { lazyStorage } = this.props;
+          tools.updateScrollHeight(this.lazyKey, res[0].height, lazyStorage)
+
           this.lazyViewHeight = res[0].height
         })
     }
     if (this.props.needInit) this.fetchInit();
   }
 
   componentWillUnmount(): void {
-    tools.lazyScrollRemove()
+    const { lazyStorage } = this.props;
+    tools.lazyScrollRemove(lazyStorage)
   }
 
   touchEvent = (e) => {

diff --git a/src/components/list-view/index.weapp.tsx b/src/components/list-view/index.weapp.tsx
@@ -22,7 +22,8 @@ class ListView extends Component<Props, State> {
   lazyKey = (
     () => {
       if (this.props.lazy) {
-        return  tools.lazyScrollInit(this.lazyClassName)
+        const { lazyStorage } = this.props;
+        return tools.lazyScrollInit(this.lazyClassName, lazyStorage)
       }
     }
   )();
@@ -58,15 +59,17 @@ class ListView extends Component<Props, State> {
         .select('.scrollView')
         .boundingClientRect()
         .exec(res => {
-          tools.updateScrollHeight(this.lazyKey, res[0].height)
+          const { lazyStorage } = this.props;
+          tools.updateScrollHeight(this.lazyKey, res[0].height, lazyStorage)
           this.lazyViewHeight = res[0].height
         })
     }
     if (this.props.needInit) this.fetchInit();
   }
 
   componentWillUnmount(): void {
-    tools.lazyScrollRemove()
+    const { lazyStorage } = this.props;
+    tools.lazyScrollRemove(lazyStorage)
   }
 
   fetchInit = () => {

diff --git a/src/components/list-view/init.tsx b/src/components/list-view/init.tsx
@@ -41,5 +41,6 @@ export const initialProps ={
   indicator: {
     activate: '下拉刷新',
     deactivate: '释放刷新'
-  }
+  },
+  lazyStorage: 'box'
 };
diff --git a/src/components/list-view/tool.ts b/src/components/list-view/tool.ts
@@ -49,9 +49,9 @@ const wait = function(time = 500) {
     });
 };
 
-function lazyScrollInit(className) {
+function lazyScrollInit(className,storagekey) {
   const lazyKey = `lazy${new Date().getTime()}`
-  const lazyBox: LazyItem[] = storage.get('lazyBox',[])
+  const lazyBox: LazyItem[] = storage.get(`lazyBox_${storagekey}`,[])
   if (lazyBox.length) {
     const length = lazyBox.length;
     const lastKey = lazyBox[length - 1];
@@ -60,22 +60,22 @@ function lazyScrollInit(className) {
     }
   }
   lazyBox.push({ key: lazyKey, className, viewHeight: 0 });
-  storage.set('lazyBox', lazyBox)
+  storage.set(`lazyBox_${storagekey}`, lazyBox)
   return lazyKey
 }
 
-function lazyScrollRemove() {
-  const lazyBox: LazyItem[] = storage.get('lazyBox',[])
+function lazyScrollRemove(storagekey) {
+  const lazyBox: LazyItem[] = storage.get(`lazyBox_${storagekey}`,[])
   lazyBox.pop();
-  storage.set('lazyBox', lazyBox)
+  storage.set(`lazyBox_${storagekey}`, lazyBox)
 }
 
-function updateScrollHeight(key, viewHeight) {
-  const lazyBox: LazyItem[] = storage.get('lazyBox',[])
+function updateScrollHeight(key, viewHeight, storagekey) {
+  const lazyBox: LazyItem[] = storage.get(`lazyBox_${storagekey}`,[])
   const index = lazyBox.findIndex(i => i.key === key)
   const targetLazy = lazyBox[index];
   lazyBox.splice(index, 1, { ...targetLazy, viewHeight })
-  storage.set('lazyBox', lazyBox)
+  storage.set(`lazyBox_${storagekey}`, lazyBox)
 }
 
 function lazyScroll(key, selector, height) {

diff --git a/src/components/list-view/type.ts b/src/components/list-view/type.ts
@@ -29,6 +29,7 @@ export interface Props {
   selector?: string;
   onScroll?: () => void;
   showIndicator?: boolean;
+  lazyStorage?: string;
 }
 
 export interface Indicator {

diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
@@ -26,6 +26,10 @@ export default class Index extends Component {
     list: blankList,
   };
 
+  componentDidMount() {
+    this.refList.fetchInit()
+  }
+
   getData = async (pIndex = pageIndex) => {
     if (pIndex === 1) this.setState({isLoaded: false})
     const { data: { data } } = await Taro.request({
@@ -37,11 +41,6 @@ export default class Index extends Component {
     })
     return {list : data, hasMore: true, isLoaded: pIndex === 1};
   };
-
-  componentDidMount() {
-    this.refList.fetchInit()
-  }
-
   pullDownRefresh = async (rest) => {
     pageIndex = 1;
     const res = await this.getData(1);
@@ -81,11 +80,12 @@ export default class Index extends Component {
             onScrollToLower={this.onScrollToLower}
             renderCustomizeLoading={(<View>自定义</View>)}
             customizeLoading
+            lazyStorage='lazyView'
           >
             {list.map((item, index) => {
               return (
-                  <View className='item skeleton-bg' key={index}>
-                    <LazyBlock current={index} className='avatar'>
+                  <View className='item skeleton-bg' key={`item_${index}`}>
+                    <LazyBlock current={index} className='avatar' lazyStorage='lazyView'>
                       <Image className='avatar skeleton-radius' src={item.author.avatar_url} />
                     </LazyBlock>
                     <View className='box'>

diff --git a/src/pages/index/lazy.tsx b/src/pages/index/lazy.tsx
@@ -11,6 +11,11 @@ export default class Index extends Component {
     list: [],
   };
 
+  componentDidMount = async () => {
+    const res = await this.getData()
+    this.setState(res)
+  }
+
   getData = async (pIndex = pageIndex) => {
     const { data: { data } } = await Taro.request({
       url: 'https://cnodejs.org/api/v1/topics',
@@ -22,11 +27,6 @@ export default class Index extends Component {
     return {list : data, hasMore: true };
   };
 
-  componentDidMount = async () => {
-    const res = await this.getData()
-    this.setState(res)
-  }
-
   onScrollToLower = async (fn) => {
     const {list} = this.state;
     const {list: newList, hasMore} = await this.getData(++pageIndex);
@@ -46,11 +46,12 @@ export default class Index extends Component {
           hasMore={hasMore}
           style={{height: '100vh'}}
           onScrollToLower={this.onScrollToLower}
+          lazyStorage='listViewLazy'
         >
           {list.map((item, index) => {
             return (
-              <View className='item' key={index}>
-                <LazyBlock current={index} className='avatar'>
+              <View className='item' key={`item_${index}`}>
+                <LazyBlock current={index} className='avatar' lazyStorage='listViewLazy'>
                   <Image className='avatar' src={item.author.avatar_url} />
                 </LazyBlock>
                 <View className='title'>