@antmjs/vantui/es/infinite-scroll/demo/demo2.js

一套适用于Taro3及React的vantui组件库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
/* eslint-disable */
import react from 'react';
import { View, Image as TaroImage, Text } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll } from '@antmjs/vantui';
import * as COMMON from './common';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Demo() {
  var _react$useState = react.useState([]),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    data = _react$useState2[0],
    setdata = _react$useState2[1];
  var mockGoods = COMMON.mockGoods;
  var InfiniteScrollInstance = react.useRef();
  var VirtualListInstance = react.useRef();
  var loadMore = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            return _context2.abrupt("return", new Promise( /*#__PURE__*/function () {
              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
                var reslult, newData;
                return _regeneratorRuntime.wrap(function _callee$(_context) {
                  while (1) switch (_context.prev = _context.next) {
                    case 0:
                      _context.next = 2;
                      return mockGoods();
                    case 2:
                      reslult = _context.sent;
                      newData = data.concat(reslult);
                      setdata(newData);
                      // 以下是简单的模拟请求，正常请求请按条件执行`resolve('complete')`
                      resolve(newData.length > 110 ? 'complete' : 'loading');
                    case 6:
                    case "end":
                      return _context.stop();
                  }
                }, _callee);
              }));
              return function (_x) {
                return _ref2.apply(this, arguments);
              };
            }()));
          case 1:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    return function loadMore() {
      return _ref.apply(this, arguments);
    };
  }();
  var onRefresh = function onRefresh() {
    return new Promise( /*#__PURE__*/function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(resolve) {
        var _InfiniteScrollInstan, _VirtualListInstance$;
        var reslult;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) switch (_context3.prev = _context3.next) {
            case 0:
              (_InfiniteScrollInstan = InfiniteScrollInstance.current) === null || _InfiniteScrollInstan === void 0 ? void 0 : _InfiniteScrollInstan.reset();
              _context3.next = 3;
              return mockGoods();
            case 3:
              reslult = _context3.sent;
              _context3.next = 6;
              return (_VirtualListInstance$ = VirtualListInstance.current) === null || _VirtualListInstance$ === void 0 ? void 0 : _VirtualListInstance$.reset();
            case 6:
              setdata(reslult);
              resolve(undefined);
            case 8:
            case "end":
              return _context3.stop();
          }
        }, _callee3);
      }));
      return function (_x2) {
        return _ref3.apply(this, arguments);
      };
    }());
  };
  return /*#__PURE__*/_jsx(PullToRefresh, {
    onRefresh: onRefresh,
    children: /*#__PURE__*/_jsx(VirtualList, {
      style: {
        padding: 10,
        boxSizing: 'border-box'
      },
      height: "calc(100vh - 135px)",
      dataSource: data,
      showCount: 3,
      ref: VirtualListInstance,
      footer: /*#__PURE__*/_jsx(InfiniteScroll, {
        parentClassName: "van-virtual-list",
        loadMore: loadMore,
        ref: InfiniteScrollInstance
      }),
      ItemRender: /*#__PURE__*/react.memo(function (_ref4) {
        var item = _ref4.item,
          id = _ref4.id;
        return /*#__PURE__*/_jsx(View, {
          className: "van-demo-goods-item-wrapper",
          id: id,
          children: /*#__PURE__*/_jsxs(View, {
            className: "van-demo-goods-item",
            children: [/*#__PURE__*/_jsx(TaroImage, {
              src: item.image,
              className: "img"
            }, item.image), /*#__PURE__*/_jsx(View, {
              className: "title",
              children: item.title
            }), item.isCutPrice && /*#__PURE__*/_jsx(Text, {
              className: "cutPrice",
              children: "\u6700\u8FD1\u5927\u964D\u4EF7"
            }), /*#__PURE__*/_jsx(View, {
              className: "price",
              children: item.price
            })]
          })
        }, item.image);
      })
    })
  });
}