From bf7ab74905eb2030f0f3ba87177cbeea954261d7 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Tue, 30 Jun 2020 15:27:36 +0800 Subject: [PATCH] gallery --- package.json | 1 + src/components/app/App.js | 2 ++ src/components/app/PartGallery.js | 37 +++++++++++++++++++++++++++++++ yarn.lock | 27 +++++++++++++++++++++- 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/components/app/PartGallery.js diff --git a/package.json b/package.json index cc979e6..0422ad4 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react-ga": "^3.0.0", "react-github-btn": "^1.2.0", "react-indiana-drag-scroll": "^1.6.1", + "react-lazy-load": "^3.0.13", "react-redux": "^7.2.0", "react-scripts": "3.4.1", "redux": "^4.0.5" diff --git a/src/components/app/App.js b/src/components/app/App.js index 43d94e9..6617cf7 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -12,6 +12,7 @@ import {connect} from 'react-redux'; import {loadDownloadData} from "../../actions"; import ReactGA from 'react-ga'; import {setScrollbarWidthProp} from "../../utils/util" +import PartGallery from "./PartGallery"; ReactGA.initialize('UA-165845289-1'); function App({ dispatch }) { @@ -39,6 +40,7 @@ function App({ dispatch }) { + diff --git a/src/components/app/PartGallery.js b/src/components/app/PartGallery.js new file mode 100644 index 0000000..1fd6131 --- /dev/null +++ b/src/components/app/PartGallery.js @@ -0,0 +1,37 @@ +import React from 'react'; +import './App.css'; +import {isPC} from "../../utils/navigatorUtils"; +import ScrollContainer from "react-indiana-drag-scroll"; +import LazyLoad from 'react-lazy-load'; + +const pictures = [ + 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery01.jpg?sign=0e29c9617c920148f6e8061386b69de0&t=1593501253', + 'https://7172-qrbtf-1d845d-1255694434.tcb.qcloud.la/QrbtfGallery/gallery02.jpg?sign=e9619d9e70adc33f9e5da775410220f5&t=1593501268' +] + +const PartGallery = () => { + return (
+
+
Gallery
+
+ {isPC() ?
拖拽滑动
: null} +
+
+ + { + pictures.map((url) => ( + + + + ) + ) + } + +
) +} + +export default PartGallery; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index fa9924d..2f9f1b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4268,6 +4268,11 @@ eventemitter3@^4.0.0: resolved "https://registry.npm.taobao.org/eventemitter3/download/eventemitter3-4.0.4.tgz?cache=0&sync_timestamp=1589283150629&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feventemitter3%2Fdownload%2Feventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384" integrity sha1-tUY6zmNaCD0Bi9x8kXtMXxCoU4Q= +eventlistener@0.0.1: + version "0.0.1" + resolved "https://registry.npm.taobao.org/eventlistener/download/eventlistener-0.0.1.tgz#ed2baabb852227af2bcf889152c72c63ca532eb8" + integrity sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg= + events@^3.0.0: version "3.1.0" resolved "https://registry.npm.taobao.org/events/download/events-3.1.0.tgz?cache=0&sync_timestamp=1578498298945&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fevents%2Fdownload%2Fevents-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59" @@ -6567,6 +6572,11 @@ lodash.clonedeep@4.5.0: resolved "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= +lodash.debounce@^4.0.0: + version "4.0.8" + resolved "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -6597,6 +6607,11 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" +lodash.throttle@^4.0.0: + version "4.1.1" + resolved "https://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -8495,7 +8510,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.4" -prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU= @@ -8744,6 +8759,16 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ= +react-lazy-load@^3.0.13: + version "3.0.13" + resolved "https://registry.npm.taobao.org/react-lazy-load/download/react-lazy-load-3.0.13.tgz#3b0a92d336d43d3f0d73cbe6f35b17050b08b824" + integrity sha1-OwqS0zbUPT8Nc8vm81sXBQsIuCQ= + dependencies: + eventlistener "0.0.1" + lodash.debounce "^4.0.0" + lodash.throttle "^4.0.0" + prop-types "^15.5.8" + react-redux@^7.2.0: version "7.2.0" resolved "https://registry.npm.taobao.org/react-redux/download/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"