电商小程序案例:分页

2020.03.09 07:03:03
20
阅读约 4 分钟
Scroll down

分页 #

分页组件(AtPagination) #

内容列表的分页组件可以用一下 Taro ui 里的 AtPagination,在 taro ui 里,先把这个组件拿出来,导入 AtPagination, 来自 taro ui

import { AtPagination } from "taro-ui";

然后在这个页面的 state 里面再添加几个分页组件上需要用到的值 … total 是内容项目的数量 … 先让它等于 0 … pageSize 是每页显示的项目的数量 … 暂时设置成 2 … current 表示的是当前的页码 …

  state = {
    products: [],
    placeholder: true,
    total: 0,
    pageSize: 2,
    current: 1,
  };

然后找到页面的 render 方法 … 先从页面的属性里面 … 把 total … pageSize … 还有 current 拿出来 …

在视图里面 … 产品列表组件的下面,添加一个 AtPagination … 给它一个 icon … 把它的值设置成 true … 如果属性的值是 true 可以只留下这个属性的名字 …

在 AtPagination 组件里面,把 icon 属性设置成 true ,它会使用图标作为分页控制按钮上的东西 … 如果是 false ,分页控制按钮上显示的是文字 … 比如上一页或者下一页 …

再设置一下 total 属性的值 … 它的值先用 parseInt 转换一下 total 的值,就是把字符串类型的值转换成数字 …

pageSize 是每页显示的项目的数量 … 对应的值是 pageSize … 再添加一个 current … 表示当前的页码 … 它的值是 current 这个 state 的值 …

 render() {
    const { products, placeholder, total, pageSize, current } = this.state;
    return (
      <View>
        <SearchBar />
        <PlaceHolder className='m-3' quantity='10' show={placeholder}></PlaceHolder>
        <ProductList data={products} />
        <AtPagination
          icon
          total={parseInt(total)}
          pageSize={pageSize}
          current={current}
          className='my-4'
        />
      </View>
    );
  }

现在,在这个产品列表的下面,会显示一个分页器 … 在这个分页器的上下可以添加点外边距 … 在这个组件的上面,添加一个 className … 值设置成 my-4 … 再去预览一下 …

页码 #

重新配置一下请求的接口 … products 的后面加上一些查询参数 … 添加一个 _limit 设置一下每页显示的数量 … 用一下 this.state.pageSize … 再添加一个参数 … 名字是 _page ,它的值是当前要显示的页码 …

得到了数据以后,可以再设置一下 total 的值,就是总共的项目的数量 … 分页组件可以根据项目的数量还有每页的项目数量自动算出一共有多少个要显示的页面 …
img
再添加一个 total … 它的值是 header … X-Total-Count …

分页功能(onPageChange) #

按一下右箭头向后翻页 … 按一下左箭头向前翻页 … 按下这些按钮会触发 onPageChnage … 找到分页器组件 … 在上面添加一个 onPageChange 属性 … 用一下 this.onPageChange 方法 . bind 一个 this …
img
如果你想使用最新的 state ,可以给它一个回调 … 在这个回调里在控制台上输出 … this.state.current 它的值 …

回到模拟器先试一下 … 现在当前页码是第一页 … 按一下向右箭头 … 当前页码会变成 2 … 按一下向左箭头,向前翻页 … 当前页码又会变成 1 …

翻页时显示加载占位符(Placeholder) #

翻页会去请求新的数据,等待返回数据这期间可以把我们的 Placeholder 组件显示出来 … 翻页的时候,执行 onPageChange ,这里除了 current ,再把 placeholder 的值设置成 true … 这样就会让 Placeholder 组件显示出来 …

另外这个产品列表组件的显示可以再做一下判断 … 找到 ProductList … 判断一下 !placeholder … && … 意思就是如果 placeholder 它的值不是 true,才会显示这个产品列表 …
img

请求接口失败时显示错误页面 #

到底是显示正常页面还是错误页面可以做一下判断 … 如果发生错误 … serviceError … 就显示错误页面 errorPage … 不然就显示正常页面 … 就是 page …
img

阅读:20 . 字数:949 发布于 7 个月前
Copyright 2018-2020 Siques