2.3.9 • Published 3 years ago

zb-listview v2.3.9

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago
  • skeleton拓展状态屏
  • 列表内部懒模块-解决小程序图片过多内存问题

安装方式

安装:npm i taro-listviewyarn add taro-listview

使用案例

引入组件

列表Demo

!!!需给组件设置固定高度

API

ListView

可配置参数

页面状态控制参数

属性说明类型默认值必传
style----
lazy开启懒加载(传入字符串为父元素className且开启)boolean or stringfalse or '.lazy-view'-
hasMore加载更多booleantruetrue
isEmpty展示空凭页boolean--
isError展示错误页boolean--
needInit初始化&自动调用下拉刷新方法boolean--
distanceToRefresh下拉刷新距离number--
damping最大下拉距离number--

自定义页面UI(状态提示语,空白屏、错误屏、底部状态的UI自定义)

属性说明类型默认值必传
color下拉加载时loading的颜色string#667baf-
emptyText空白页提示语string--
footerLoaded列表底部提示语string暂无更多内容-
footerLoading列表底部提示语string加载中-
launch*是否开启状态屏的渲染,状态屏节点对应以下renderXX属性(如下)object{ launchError = false, launchEmpty = false, launchFooterLoaded = false, launchFooterLoading = false }-
renderError错误页Taro.Node--
renderEmpty空白页Taro.Node--
renderFooterLoaded自定义底部加载完毕Taro.Node--
renderFooterLoading自定义底部加载Taro.Node--
indicator下拉提示语Object{ release = '加载中', activate = '下拉刷新', deactivate = '释放刷新'}-

*错误屏中重新初始化方法与下拉刷新方法一致

import Taro, {Component} from '@tarojs/taro';
import {View, Image} from '@tarojs/components';
import ListView, { LazyBlock } from 'taro-listview';

const blankList = [{
  author: {},
  title: 'this is a example',
},{
  author: {},
  title: 'this is a example',
},{
  author: {},
  title: 'this is a example',
},{
  author: {},
  title: 'this is a example',
}]

let pageIndex = 1;

export default class Index extends Component {
  state = {
    isLoaded: false,
    error: false,
    hasMore: true,
    isEmpty: false,
    list: blankList,
  };

  getData = async (pIndex = pageIndex) => {
    if (pIndex === 1) this.setState({isLoaded: false})
    const { data: { data } } = await Taro.request({
      url: 'https://cnodejs.org/api/v1/topics',
      data: {
        limit: 10,
        page: pIndex
      }
    })
    console.log({data})
    return {list : data, hasMore: true, isLoaded: pIndex === 1};
  };

  componentDidMount() {
    this.refList.fetchInit()
  }

  pullDownRefresh = async (rest) => {
    pageIndex = 1;
    const res = await this.getData(1);
    this.setState(res);
    rest()
  };

  onScrollToLower = async (fn) => {
    const {list} = this.state;
    const {list: newList, hasMore} = await this.getData(++pageIndex);
    this.setState({
      list: list.concat(newList),
      hasMore
    });
    fn();
  };

  refList = {};

  insRef = (node) => {
    this.refList = node;
  };

  render() {
    const {isLoaded, error, hasMore, isEmpty, list} = this.state;
    return (
        <View className='skeleton lazy-view'>
          <ListView
            lazy
            ref={node => this.insRef(node)}
            isLoaded={isLoaded}
            isError={error}
            hasMore={hasMore}
            style={{height: '100vh'}}
            isEmpty={isEmpty}
            onPullDownRefresh={fn => this.pullDownRefresh(fn)}
            onScrollToLower={this.onScrollToLower}
          >
            {list.map((item, index) => {
              return (
                  <View className='item skeleton-bg' key={index}>
                    <LazyBlock current={index} className='avatar'>
                      <Image className='avatar skeleton-radius' src={item.author.avatar_url} />
                    </LazyBlock>
                    <View className='title skeleton-rect'>
                      {item.title}
                    </View>
                  </View>
              )
            })}
          </ListView>
        </View>
    )
  }
}

模块懒加载

1.模块需固定同一高度。

2.只能在ListView组件内使用,并开启lazy模式,且父元素的className='lazy-view'!!!

3.组件需传入模块遍历后的下标。

API

LazyBlock
属性说明类型默认值必传
current传入模块遍历后的下标numbernulltrue
import Taro, {Component} from '@tarojs/taro';
import {View, Image} from '@tarojs/components';
import ListView, { LazyBlock } from 'taro-listView';

let pageIndex = 1;

export default class Index extends Component {
  state = {
    isLoaded: false,
    error: false,
    hasMore: true,
    isEmpty: false,
    list: [],
  };

  getData = async (pIndex = pageIndex) => {
    if (pIndex === 1) this.setState({isLoaded: false})
    const { data: { data } } = await Taro.request({
      url: 'https://cnodejs.org/api/v1/topics',
      data: {
        limit: 10,
        page: pIndex
      }
    })
    return {list : data, hasMore: true, isLoaded: pIndex === 1};
  };

  componentDidMount() {
    this.getData()
  }

  onScrollToLower = async (fn) => {
    const {list} = this.state;
    const {list: newList, hasMore} = await this.getData(++pageIndex);
    this.setState({
      list: list.concat(newList),
      hasMore
    });
    fn();
  };

  render() {
    const {isLoaded, error, hasMore, isEmpty, list} = this.state;
    return (
      <View className='lazy-view'>
        <ListView
          lazy
          isLoaded={isLoaded}
          hasMore={hasMore}
          style={{height: '100vh'}}
          onScrollToLower={this.onScrollToLower}
        >
          {list.map((item, index) => {
            return (
              <View className='item' key={index}>
                <LazyBlock current={index} className='avatar'>
                  <Image className='avatar' src={item.author.avatar_url} />
                </LazyBlock>
                <View className='title'>
                  {item.title}
                </View>
              </View>
            )
          })}
        </ListView>
      </View>
    )
  }
}

骨架屏

1.因骨架屏是捕捉已有占位数据的样式,再绘制出骨架,所以要先注入默认空白占位数据。

2.且需要一个传入父元素的className(默认获取为“skeleton”),以便寻找元素下的所有“关节”元素。可通过传入selector参数自定义className。

有且只有捕捉以下提供的“关节”样式名:背景('skeleton-bg')、矩阵('skeleton-rect')、圆形('skeleton-redius')。

3.ListView组件已嵌套Skeleton组件,直接调用对应属性即可。

*“关节”元素需内容撑开,或者固定高度。

API

Skeleton
属性说明类型默认值必传
isLoaded骨架屏是否显示(eg:加载第一页时开启)booleanfalse-
selector骨架屏外层class名称skeleton--

骨架屏Demo

import Taro, {useState} from '@tarojs/taro';
import {View, Button} from '@tarojs/components';
import {Skeleton} from 'components';
import './index.scss'

export default () => {
    const [isLoaded, setLoaded] = useState(false)
    return (
        <View>
            <Button onClick={() => setLoaded(!isLoaded)}>toggle</Button>
            <View className='skeleton'>
                <Skeleton isLoaded={isLoaded}>
                   {
                       Array(4).fill(1).map(i => (
                           <View className='item skeleton-bg' key={i}>
                               <View className='avatar skeleton-radius'/>
                               <View className='title skeleton-rect'>
                                   title
                               </View>
                           </View>
                       ))
                   }
                </Skeleton>
            </View>
        </View>
    )
}

方法参数

事件名称说明类型默认值必传
onPullDownRefresh下拉刷新触发函数function--
onScrollToLower上拉底触发函数function--
onPullDownRefresh = async (rest) => {
  await getData()
  rest()
}

onScrollToLower = async (fn) => {
  await getData()
  fn()
};

1.1.12

1.修改 list-view
e.preventDefault() 频繁报错注释 2.下拉刷新动作页面闪烁.透明度变化注释