@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
139 lines (137 loc) • 6.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Demo;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _components = require("@tarojs/components");
var _vantui = require("@antmjs/vantui");
var COMMON = _interopRequireWildcard(require("./common"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable */
function Demo() {
var _react$useState = _react.default.useState([]),
_react$useState2 = (0, _slicedToArray2.default)(_react$useState, 2),
data = _react$useState2[0],
setdata = _react$useState2[1];
var mockGoods = COMMON.mockGoods;
var InfiniteScrollInstance = _react.default.useRef();
var VirtualListInstance = _react.default.useRef();
var loadMore = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", new Promise( /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(resolve) {
var reslult, newData;
return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(resolve) {
var _InfiniteScrollInstan, _VirtualListInstance$;
var reslult;
return _regenerator.default.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__*/(0, _jsxRuntime.jsx)(_vantui.PullToRefresh, {
onRefresh: onRefresh,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.VirtualList, {
style: {
padding: 10,
boxSizing: 'border-box'
},
height: "calc(100vh - 135px)",
dataSource: data,
showCount: 3,
ref: VirtualListInstance,
footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.InfiniteScroll, {
parentClassName: "van-virtual-list",
loadMore: loadMore,
ref: InfiniteScrollInstance
}),
ItemRender: /*#__PURE__*/_react.default.memo(function (_ref4) {
var item = _ref4.item,
id = _ref4.id;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-demo-goods-item-wrapper",
id: id,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-demo-goods-item",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
src: item.image,
className: "img"
}, item.image), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "title",
children: item.title
}), item.isCutPrice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "cutPrice",
children: "\u6700\u8FD1\u5927\u964D\u4EF7"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "price",
children: item.price
})]
})
}, item.image);
})
})
});
}