头部
),
95 | footer: (底部
)
96 | };
97 |
98 | return (
99 | -
101 | {contents.map((item) => {
102 | return item;
103 | })}
104 |
8 |
33 | );
34 | };
35 |
36 | render(React AlloyTouch 例子
9 |-
10 |
- 11 | 简单例子 12 | 13 |
- 14 | 下拉刷新，上拉加载更多 15 | 16 |
- 17 | 带头部和底部的下拉刷新，上拉加载更多 18 | 19 |
- 20 | 轮播 21 | 22 |
- 23 | 下拉刷新中包含轮播图 24 | 25 |
- 26 | 下拉刷新中包含轮播图2 27 | 28 |
- 29 | 自定义轮播内容+tabs 30 | 31 |
110 |
111 |
112 | );
113 | return (
114 | -
116 | {contents.map((item) => {
117 | return item;
118 | })}
119 |
111 |
112 |
118 | -
113 | {contents.map((item) => {
114 | return item;
115 | })}
116 |
-
100 | {contents.map((item) => {
101 | return item;
102 | })}
103 |
16 | {content.map((it) => {
17 | return (
18 |
22 | {`测试内容 ${it + 1}`}
19 | ); 20 | })} 21 |123
54 | )
55 | const swiper2 = (
56 | 456
57 | )
58 |
59 | const carouselItems = [swiper1, swiper2];
60 |
61 | return (
62 |
63 |
64 |
65 |
66 |
67 | );
68 | }
69 | }
70 |
71 | render(
72 |
91 |
95 | );
96 | }
97 | }
98 |
99 | export default ReactAlloyTouch;
100 |
--------------------------------------------------------------------------------
/js/ReactCarousel.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import AlloyTouch from './AlloyTouch';
4 | import Transform from 'alloytouch/transformjs/transform';
5 |
6 | // 基于腾讯组件 https://github.com/AlloyTeam/AlloyTouch 实现
7 | class ReactAlloyTouch extends Component {
8 | //可能需要传入的参数
9 | static propTypes = {
10 | className: PropTypes.string, // 自定义 className
11 | prefix: PropTypes.string, // 样式前缀
12 | options: PropTypes.object, // AlloyTouch 组件选项
13 | items: PropTypes.array, // 轮播图
14 | active: PropTypes.number, // 当前活动轮播图
15 | autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), // 是否自动播放
16 | events: PropTypes.object, // 自定义各种事件
17 | };
18 |
19 | static defaultProps = {
20 | className: '',
21 | prefix: 'carousel',
22 | active: 0,
23 | autoPlay: 4000, // 默认一4秒播放一次
24 | events: {},
25 | };
26 |
27 | constructor(props) {
28 | super(props);
29 |
30 | this.currentIndex = 0;
31 | }
32 |
33 | componentDidMount() {
34 | const {wrapper, scroller, nav} = this.refs;
35 | const {options, items} = this.props;
36 |
37 | this.navItems = nav.querySelectorAll('a');
38 | Transform(scroller, true);
39 |
40 | const alloyOptions = {
41 | touch: wrapper, //反馈触摸的dom
42 | vertical: false, //不必需，默认是true代表监听竖直方向touch
43 | target: scroller, //运动的对象
44 | property: 'translateX', //被运动的属性
45 | min: wrapper.clientWidth * -(items.length - 1), //不必需,运动属性的最小值
46 | max: 0, //不必需,滚动属性的最大值
47 | step: wrapper.clientWidth,
48 | spring: true, //不必需,是否有回弹效果。默认是true
49 | inertia: false, //不必需,是否有惯性。默认是true
50 | touchStart: this.touchStart,
51 | touchEnd: this.touchEnd,
52 | animationEnd: this.animationEnd,
53 | ...(options || {})
54 | };
55 |
56 | // 初始化 alloyTouch 实例
57 | this.alloyTouch = new AlloyTouch(alloyOptions);
58 | this.handleAutoPlay();
59 | }
60 |
61 | touchStart = () => {
62 | // 先删除
63 | clearInterval(this.timerId);
64 | };
65 |
66 | touchEnd = (evt, value, index) => {
67 | const {step, min, max} = this.alloyTouch;
68 | const stepV = index * step * -1;
69 | const dx = value - stepV;
70 |
71 | if (value < min) {
72 | this.alloyTouch.to(min);
73 | } else if (value > max) {
74 | this.alloyTouch.to(max);
75 | } else if (Math.abs(dx) < 30) {
76 | this.alloyTouch.to(stepV);
77 | } else if (dx > 0) {
78 | this.alloyTouch.to(stepV + step);
79 | } else {
80 | this.alloyTouch.to(stepV - step);
81 | }
82 | this.currentIndex = index;
83 |
84 | // 开启自动播放
85 | this.handleAutoPlay();
86 | return false;
87 | };
88 |
89 | animationEnd = () => {
90 | const len = this.navItems.length;
91 | let i = 0;
92 | for (; i < len; i++) {
93 | if (i === this.alloyTouch.currentPage) {
94 | this.navItems[i].classList.add('active');
95 | } else {
96 | this.navItems[i].classList.remove('active');
97 | }
98 | }
99 | };
100 |
101 | // 自动播放
102 | handleAutoPlay() {
103 | const {autoPlay, items} = this.props;
104 | const len = items.length;
105 | if (autoPlay) {
106 | this.timerId = setInterval(() => {
107 | const {step} = this.alloyTouch;
108 | const stepV = this.currentIndex * step * -1;
109 | this.alloyTouch.to(stepV);
110 | if (this.currentIndex >= len - 1) {
111 | this.currentIndex = 0;
112 | } else {
113 | this.currentIndex++;
114 | }
115 | }, autoPlay);
116 | }
117 | }
118 |
119 | render() {
120 | const {
121 | className, prefix, items, active, events,
122 | } = this.props;
123 |
124 | const len = items.length;
125 | return (
126 |
92 | {children}
93 |
94 |
127 |
144 | );
145 | }
146 | }
147 |
148 | export default ReactAlloyTouch;
149 |
--------------------------------------------------------------------------------
/js/ReactPull.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import AlloyTouch from './AlloyTouch';
4 | import Transform from 'alloytouch/transformjs/transform';
5 |
6 | // 基于腾讯组件
7 | class ReactAlloyTouch extends Component {
8 | //可能需要传入的参数
9 | static propTypes = {
10 | children: PropTypes.node, // 待渲染的内容
11 | className: PropTypes.string, // 自定义 className
12 | header: PropTypes.element, // 头部
13 | footer: PropTypes.element, // 底部
14 | options: PropTypes.object, // AlloyTouch 组件选项
15 | lockInTime: PropTypes.number, // 延迟刷新或加载
16 | enableText: PropTypes.bool, // 是否显示文本
17 | refresh: PropTypes.bool, // 是否下拉刷新
18 | refreshThreshold: PropTypes.number, // 设置刷新页面时，距离顶部临界值，
19 | refreshCallback: PropTypes.func, // 刷新回调函数
20 | pullDownText: PropTypes.array, // 下拉显示文本内容
21 | loadMore: PropTypes.bool, // 是否加载更多
22 | loadMoreThrottle: PropTypes.number, // 设置加载更多，距离最底部临界值，
23 | loadMoreCallback: PropTypes.func, // 加载更多回调函数
24 | pullUpText: PropTypes.array, // 上拉显示文本内容
25 | loadMoreProcessIcon: PropTypes.bool, // 加载更多过程图标
26 | disablePullUp: PropTypes.bool, // 对于上拉加载更多时，如果没有更多记录时，禁止上滑，
27 | loadedRecoilTime: PropTypes.number, // 加载完更多数据回弹时间
28 | moveForwardOffset: PropTypes.number, // 加载完更多数据时，向前推进的距离
29 | };
30 |
31 | static defaultProps = {
32 | className: '',
33 | refreshThreshold: 50,
34 | loadMoreThrottle: 30,
35 | lockInTime: 0,
36 | pullDownText: ['下拉刷新', '松开刷新数据', '加载中，请稍后...'],
37 | pullUpText: ['上滑加载更多...', '松开加载数据', '加载中，请稍后...', '没有更多数据了'],
38 | enableText: true,
39 | loadMoreProcessIcon: true,
40 | loadedRecoilTime: 300,
41 | moveForwardOffset: 50
42 | };
43 |
44 | constructor(props) {
45 | super(props);
46 | this.state = {
47 | refreshText: props.pullDownText[0],
48 | loadMoreText: props.pullUpText[0]
49 | };
50 | // 下拉状态: 分为没有开启，开启，加载中 null enable loading
51 | this.refreshState = null;
52 | // 上滑状态: 分为没有开启，开启，加载中 null enable loading
53 | this.loadMoreState = null;
54 | }
55 |
56 | componentDidMount() {
57 | const {wrapper, scroller} = this.refs;
58 | const {options} = this.props;
59 |
60 | Transform(scroller, true);
61 |
62 | // 设置向下滑动时，滑动的最小值，如果采用translateY，则设置 y的最小值，如果不设置 min，则可以无限制的向下滑动
63 | let min = wrapper.clientHeight - scroller.scrollHeight;
64 | if (min >= 0) {
65 | min = 0;
66 | }
67 |
68 | const alloyOptions = {
69 | touch: wrapper, // 反馈触摸的dom
70 | target: scroller, // 运动的对象
71 | vertical: true, // 不必需，默认是true代表监听竖直方向touch
72 | property: 'translateY', // 被运动的属性
73 | sensitivity: 1, // 不必需,触摸区域的灵敏度，默认值为1，可以为负数
74 | factor: 1, // 不必需,表示触摸位移与被运动属性映射关系，默认值是1
75 | min,
76 | max: 0, // 不必需,滚动属性的最大值
77 | step: 40, // 用于校正到step的整数倍
78 | maxSpeed: 2, //不必需，触摸反馈的最大速度限制
79 | touchStart: this.touchStart,
80 | touchMove: this.touchMove,
81 | touchEnd: this.touchEnd,
82 | ...(options || {})
83 | };
84 |
85 | // 初始化 alloyTouch 实例
86 | this.alloyTouch = new AlloyTouch(alloyOptions);
87 |
88 | this.adjustPosition();
89 | }
90 |
91 | componentDidUpdate() {
92 | // 每次页面数据更改后，需要重新设置 this.alloyTouch 的 min 值
93 | const {wrapper, scroller} = this.refs;
94 |
95 | let min = wrapper.clientHeight - scroller.scrollHeight;
96 | if (min >= 0) {
97 | min = 0;
98 | }
99 | this.alloyTouch.setOption('min', min);
100 |
101 | this.adjustPosition();
102 | }
103 |
104 | adjustPosition() {
105 | const {header, footer, alloyBody} = this.refs;
106 |
107 | if (header) {
108 | alloyBody.style.top = `${header.scrollHeight}px`;
109 | }
110 |
111 | if (footer) {
112 | alloyBody.style.bottom = `${footer.scrollHeight}px`;
113 | }
114 | }
115 |
116 | // touch 开始时
117 | touchStart = (e, value) => {
118 | if (this.props.loadMore) {
119 | // 记录当前滑动值
120 | const {wrapper, scroller} = this.refs;
121 | let heightOffset = wrapper.clientHeight - scroller.scrollHeight;
122 | if (heightOffset > 0) {
123 | heightOffset = 0;
124 | }
125 |
126 | this.offsetStart = heightOffset;
127 | this.moveValue = value;
128 | }
129 | };
130 |
131 | // touch 移动时，分刷新和加载更多
132 | touchMove = (e, value) => {
133 | const {
134 | refresh, loadMore, refreshThreshold, loadMoreThrottle,
135 | pullDownText, pullUpText
136 | } = this.props;
137 |
138 | // 下拉刷新
139 | if (refresh && this.refreshState !== 'loading') {
140 | const {refreshEl, refreshIconEl} = this.refs;
141 | const {style} = refreshEl;
142 | if (value > 0) {
143 | if (value > refreshThreshold) {
144 | this.refreshState = 'enable';
145 | refreshIconEl.classList.add('rotate');
146 | this.setState({
147 | refreshText: pullDownText[1]
148 | });
149 | } else {
150 | this.refreshState = null;
151 | refreshIconEl.classList.remove('rotate');
152 | this.setState({
153 | refreshText: pullDownText[0]
154 | });
155 | }
156 | }
157 |
158 | style.opacity = 1;
159 | style.webkitTransform = `translate3d(0, ${value}px, 0)`;
160 | style.transform = `translate3d(0, ${value}px, 0)`;
161 | }
162 |
163 | // 上滑加载更多
164 | if (loadMore) {
165 | const {disablePullUp} = this.props;
166 | const {loadMoreEl, loadMoreIconEl} = this.refs;
167 | const {style} = loadMoreEl;
168 | const {wrapper, scroller} = this.refs;
169 |
170 | const min = wrapper.clientHeight - scroller.scrollHeight;
171 |
172 | if (this.loadMoreState !== 'loading') {
173 | if (disablePullUp) {
174 | const min = wrapper.clientHeight - scroller.scrollHeight;
175 | if (min < 0) {
176 | loadMoreEl.style.visibility = value < min - 5 ? 'visible' : 'hidden';
177 | }
178 | return false;
179 | }
180 | if (value < min && value < 0) {
181 | style.visibility = 'visible';
182 | if (Math.abs(value - this.moveValue) > loadMoreThrottle) {
183 | this.loadMoreState = 'enable';
184 | loadMoreIconEl.classList.add('rotate');
185 | this.setState({
186 | loadMoreText: pullUpText[1]
187 | });
188 | } else {
189 | this.loadMoreState = null;
190 | loadMoreIconEl.classList.remove('rotate');
191 | this.setState({
192 | loadMoreText: pullUpText[0]
193 | });
194 | }
195 | } else {
196 | style.visibility = 'hidden';
197 | }
198 | }
199 | }
200 | };
201 |
202 | // touch end
203 | touchEnd = (e, value) => {
204 | const {refresh, loadMore, disablePullUp} = this.props;
205 | // 刷新
206 | if (value > 0) {
207 | if (refresh) {
208 | if (this.refreshState === 'enable') {
209 | this.refresh(e);
210 | } else {
211 | this.resetRefreshState();
212 | }
213 | // 阻止默认的滑动
214 | return false;
215 | }
216 | return;
217 | }
218 |
219 | // 加载更多
220 | const {wrapper, scroller} = this.refs;
221 | const min = wrapper.clientHeight - scroller.scrollHeight;
222 | if (value < min) {
223 | if (loadMore && !disablePullUp && this.loadMoreState === 'enable') {
224 | this.loadMore(e);
225 | // 阻止默认的滑动
226 | return false;
227 | }
228 | this.resetLoadMoreState({moveTo: false});
229 | }
230 | };
231 |
232 | // 刷新数据
233 | refresh = (e) => {
234 | if (e) {
235 | e.stopImmediatePropagation();
236 | }
237 |
238 | if (this.refreshState === null || this.refreshState === 'loading') {
239 | return;
240 | }
241 | this.refreshState = 'loading';
242 | const {refreshCallback, lockInTime, pullDownText} = this.props;
243 | const {refreshIconEl} = this.refs;
244 | refreshIconEl.classList.add('loading');
245 | this.setState({
246 | refreshText: pullDownText[2]
247 | });
248 |
249 | if (refreshCallback && typeof refreshCallback === 'function') {
250 | if (lockInTime > 0) {
251 | clearTimeout(this.refreshTimoutId);
252 | this.refreshTimoutId = setTimeout(() => {
253 | refreshCallback().then(this.resetRefreshState, this.resetRefreshState);
254 | }, lockInTime);
255 | } else {
256 | refreshCallback().then(this.resetRefreshState, this.resetRefreshState);
257 | }
258 | } else {
259 | this.resetRefreshState();
260 | }
261 | };
262 |
263 | // 恢复刷新原始状态
264 | resetRefreshState = () => {
265 | const {pullDownText, refresh} = this.props;
266 | this.refreshState = null;
267 | if (refresh) {
268 | const {refreshEl, refreshIconEl} = this.refs;
269 | const {style} = refreshEl;
270 | refreshIconEl.classList.remove('rotate');
271 | refreshIconEl.classList.remove('loading');
272 |
273 | style.opacity = 0;
274 | style.transition = '';
275 | style.webkitTransition = '';
276 | style.webkitTransform = 'translate3d(0, 0, 0)';
277 | style.transform = 'translate3d(0, 0, 0)';
278 |
279 | this.setState({
280 | refreshText: pullDownText[0]
281 | });
282 | }
283 |
284 | this.alloyTouch.to(0);
285 | };
286 |
287 | // 加载更多
288 | loadMore = (e) => {
289 | if (e) {
290 | e.stopImmediatePropagation();
291 | }
292 |
293 | if (this.loadMoreState === null || this.loadMoreState === 'loading') {
294 | return;
295 | }
296 | this.loadMoreState = 'loading';
297 | const {loadMoreCallback, lockInTime, pullUpText} = this.props;
298 | const {loadMoreIconEl} = this.refs;
299 | loadMoreIconEl.classList.add('loading');
300 | this.setState({
301 | loadMoreText: pullUpText[2]
302 | });
303 |
304 | if (loadMoreCallback && typeof loadMoreCallback === 'function') {
305 | if (lockInTime > 0) {
306 | clearTimeout(this.loadMoreTimoutId);
307 | this.loadMoreTimoutId = setTimeout(() => {
308 | loadMoreCallback().then(() => {
309 | this.resetLoadMoreState({adjust: true});
310 | }, () => {
311 | this.resetLoadMoreState({});
312 | });
313 | }, lockInTime);
314 | } else {
315 | loadMoreCallback().then(() => {
316 | this.resetLoadMoreState({adjust: true});
317 | }, () => {
318 | this.resetLoadMoreState({});
319 | });
320 | }
321 | } else {
322 | this.resetLoadMoreState({});
323 | }
324 | };
325 |
326 | // 恢复加载更多原始状态
327 | resetLoadMoreState = ({adjust = false, moveTo = true}) => {
328 | const {pullUpText, loadedRecoilTime, moveForwardOffset, loadMore} = this.props;
329 | this.loadMoreState = null;
330 | if (loadMore) {
331 | const {loadMoreEl, loadMoreIconEl} = this.refs;
332 | loadMoreIconEl.classList.remove('rotate');
333 | loadMoreIconEl.classList.remove('loading');
334 |
335 | this.setState({
336 | loadMoreText: pullUpText[0]
337 | });
338 | loadMoreEl.style.visibility = 'hidden';
339 | }
340 |
341 | if (this.offsetStart !== undefined) {
342 | let offset;
343 | if (adjust) {
344 | offset = this.offsetStart < -moveForwardOffset ? this.offsetStart - moveForwardOffset : this.offsetStart;
345 | } else {
346 | offset = this.offsetStart;
347 | }
348 |
349 | if (moveTo) {
350 | this.alloyTouch.to(offset, loadedRecoilTime);
351 | }
352 | }
353 | };
354 |
355 | // 选择加载更多
356 | renderLoadMore() {
357 | const {loadMoreText} = this.state;
358 | const {enableText, loadMore, loadMoreProcessIcon, disablePullUp, pullUpText} = this.props;
359 | if (loadMore) {
360 | return (
361 |
128 | {items.map(({image, link}) => {
129 | if (link) {
130 | return (
131 | 
132 | );
133 | }
134 | return (
);
135 | })}
136 |
137 |
143 |
362 |
364 | {enableText ? (
365 |
368 | );
369 | }
370 | return null;
371 | }
372 |
373 | render() {
374 | const {
375 | children, className, header, footer, refresh, enableText
376 | } = this.props;
377 | const {refreshText} = this.state;
378 |
379 | return (
380 | {disablePullUp ? pullUpText[3] : loadMoreText}
) : null}
367 |
381 | {header ? (
400 | );
401 | }
402 | }
403 |
404 | export default ReactAlloyTouch;
405 |
--------------------------------------------------------------------------------
/js/ReactSwiper.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import PropTypes from 'prop-types';
3 | import AlloyTouch from './AlloyTouch';
4 | import Transform from 'alloytouch/transformjs/transform';
5 |
6 | // 基于腾讯组件 https://github.com/AlloyTeam/AlloyTouch 实现
7 | class ReactAlloyTouch extends Component {
8 | //可能需要传入的参数
9 | static propTypes = {
10 | className: PropTypes.string, // 自定义 className
11 | prefix: PropTypes.string, // 样式前缀
12 | options: PropTypes.object, // AlloyTouch 组件选项
13 | items: PropTypes.array, // 轮播图
14 | showDot: PropTypes.bool, //是否显示点
15 | active: PropTypes.number, // 当前活动轮播图
16 | autoPlay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), // 是否自动播放
17 | events: PropTypes.object, // 自定义各种事件
18 | onSlideChange: PropTypes.func
19 | };
20 |
21 | static defaultProps = {
22 | className: '',
23 | prefix: 'carousel',
24 | active: 0,
25 | autoPlay: 4000, // 默认一4秒播放一次
26 | tabsMenu: null,
27 | events: {},
28 | };
29 |
30 | constructor(props) {
31 | super(props);
32 |
33 | this.currentIndex = 0;
34 | }
35 |
36 | componentDidMount() {
37 | const {wrapper, scroller, nav, menu} = this.refs;
38 | const {options, items, prefix} = this.props;
39 |
40 | this.navItems = nav.querySelectorAll('a');
41 | Transform(scroller);
42 |
43 | const alloyOptions = {
44 | touch: wrapper, //反馈触摸的dom
45 | vertical: false, //不必需，默认是true代表监听竖直方向touch
46 | target: scroller, //运动的对象
47 | property: 'translateX', //被运动的属性
48 | min: wrapper.clientWidth * -(items.length - 1), //不必需,运动属性的最小值
49 | max: 0, //不必需,滚动属性的最大值
50 | step: wrapper.clientWidth,
51 | spring: true, //不必需,是否有回弹效果。默认是true
52 | inertia: false, //不必需,是否有惯性。默认是true
53 | touchStart: this.touchStart,
54 | touchEnd: this.touchEnd,
55 | animationEnd: this.animationEnd,
56 | ...(options || {})
57 | };
58 |
59 | // 初始化 alloyTouch 实例
60 | this.alloyTouch = new AlloyTouch(alloyOptions);
61 | this.handleAutoPlay();
62 | }
63 |
64 | touchStart = () => {
65 | // 先删除
66 | clearInterval(this.timerId);
67 | };
68 |
69 | touchEnd = (evt, value, index) => {
70 | const {step, min, max} = this.alloyTouch;
71 | const stepV = index * step * -1;
72 | const dx = value - stepV;
73 |
74 | if (value < min) {
75 | this.alloyTouch.to(min);
76 | } else if (value > max) {
77 | this.alloyTouch.to(max);
78 | } else if (Math.abs(dx) < 30) {
79 | this.alloyTouch.to(stepV);
80 | } else if (dx > 0) {
81 | this.alloyTouch.to(stepV + step);
82 | } else {
83 | this.alloyTouch.to(stepV - step);
84 | }
85 | this.currentIndex = index;
86 |
87 | // 开启自动播放
88 | this.handleAutoPlay();
89 | return false;
90 | };
91 |
92 | animationEnd = () => {
93 | const len = this.navItems.length;
94 | let i = 0;
95 | for (; i < len; i++) {
96 | if (i === this.alloyTouch.currentPage) {
97 | this.navItems[i].classList.add('active');
98 | } else {
99 | this.navItems[i].classList.remove('active');
100 | }
101 | }
102 |
103 | if (typeof this.props.onSlideChange === 'function') this.props.onSlideChange(this.alloyTouch.currentPage)
104 | };
105 |
106 | //给外部组件提供接口
107 | SlideTo = (index) => {
108 | const {step} = this.alloyTouch;
109 | const stepV = index * step * -1;
110 | this.alloyTouch.to(stepV);
111 | };
112 |
113 | // 自动播放
114 | handleAutoPlay() {
115 | const {autoPlay, items} = this.props;
116 | const len = items.length;
117 | if (autoPlay) {
118 | this.timerId = setInterval(() => {
119 | const {step} = this.alloyTouch;
120 | const stepV = this.currentIndex * step * -1;
121 | this.alloyTouch.to(stepV);
122 | if (this.currentIndex >= len - 1) {
123 | this.currentIndex = 0;
124 | } else {
125 | this.currentIndex++;
126 | }
127 | }, autoPlay);
128 | }
129 | }
130 |
131 | render() {
132 | const {
133 | className, prefix, items, active, showDot, events,
134 | } = this.props;
135 |
136 | const len = items.length;
137 | return (
138 |
154 | );
155 | }
156 | }
157 |
158 | export default ReactAlloyTouch;
159 |
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | import ReactAlloyTouch from './ReactAlloyTouch';
2 | import reactPull from './ReactPull';
3 | import reactCarousel from './ReactCarousel';
4 | import reactSwiper from './ReactSwiper';
5 |
6 | export const ReactPull = reactPull;
7 | export const ReactCarousel = reactCarousel;
8 | export const ReactSwiper = reactSwiper;
9 |
10 | export default ReactAlloyTouch;
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-alloytouch",
3 | "version": "0.4.1",
4 | "author": {
5 | "name": "Linder Wang",
6 | "email": "linder0209@126.com",
7 | "url": "https://github.com/hopefuture"
8 | },
9 | "description": "This is a react component for AlloyTouch.",
10 | "keywords": [
11 | "react",
12 | "alloyTouch"
13 | ],
14 | "main": "lib/index.js",
15 | "module": "es/index.js",
16 | "jsnext:main": "es/index.js",
17 | "scripts": {
18 | "start": "gulp example",
19 | "clean": "rimraf publish/css publish/sass publish/lib publish/js publish/dist publish/es",
20 | "clean:examples": "rimraf examples-dist",
21 | "build:commonjs": "cross-env BABEL_ENV=commonjs babel js --out-dir publish/lib",
22 | "build:es": "cross-env BABEL_ENV=es babel js --out-dir publish/es",
23 | "build:umd": "webpack --progress --colors --config webpack.config.babel.js --output-filename [name].js",
24 | "build:umd:min": "webpack --progress --colors --config webpack.config.babel.js --output-filename [name].min.js --optimize-minimize",
25 | "prebuild": "npm run clean",
26 | "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
27 | "prebuild:examples": "npm run clean:examples",
28 | "build:examples": "webpack --progress --colors --config webpack.config.example.dist.babel.js",
29 | "postbuild:examples": "gulp copy-eruda-dist",
30 | "prebuild:publish": "npm run build && gulp scss && gulp copy-publish",
31 | "build:publish": "gulp publish",
32 | "examples:publish": "npm run build:examples && git add examples-dist && git commit -m \"Update online examples\" && git subtree push --prefix=examples-dist origin gh-pages --squash && git push"
33 | },
34 | "dependencies": {
35 | "alloytouch": "^0.2.5",
36 | "eruda": "^1.3.1",
37 | "prop-types": "^15.6.0",
38 | "react": "^16.2.0",
39 | "react-dom": "^16.2.0",
40 | "react-tap-event-plugin": "^3.0.2"
41 | },
42 | "devDependencies": {
43 | "autoprefixer": "^7.2.1",
44 | "babel-cli": "^6.26.0",
45 | "babel-core": "^6.26.0",
46 | "babel-eslint": "^8.0.3",
47 | "babel-loader": "^7.1.2",
48 | "babel-plugin-transform-class-properties": "^6.24.1",
49 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
50 | "babel-preset-env": "^1.6.1",
51 | "babel-preset-react": "^6.24.1",
52 | "cross-env": "^5.1.1",
53 | "css-loader": "^0.28.7",
54 | "eslint": "4.12.1",
55 | "eslint-loader": "^1.9.0",
56 | "eslint-plugin-react": "^7.5.1",
57 | "extract-text-webpack-plugin": "^3.0.2",
58 | "gulp": "^3.9.1",
59 | "gulp-autoprefixer": "^4.0.0",
60 | "gulp-copy": "^1.0.1",
61 | "gulp-load-plugins": "^1.5.0",
62 | "gulp-postcss": "^7.0.0",
63 | "gulp-sass": "^3.1.0",
64 | "gulp-sourcemaps": "^2.6.1",
65 | "gulp-util": "^3.0.8",
66 | "html-webpack-plugin": "^2.30.1",
67 | "node-sass": "^4.7.2",
68 | "opn": "^5.1.0",
69 | "postcss": "^6.0.14",
70 | "postcss-flexbugs-fixes": "^3.2.0",
71 | "postcss-loader": "^2.0.9",
72 | "precss": "^2.0.0",
73 | "require-dir": "^0.3.2",
74 | "sass-loader": "^6.0.6",
75 | "style-loader": "^0.19.0",
76 | "webpack": "^3.10.0",
77 | "webpack-dev-server": "^2.9.5"
78 | },
79 | "engines": {
80 | "node": ">=6.9.1"
81 | },
82 | "repository": {
83 | "type": "git",
84 | "url": "git+https://github.com/joy-web/react-alloytouch.git"
85 | },
86 | "license": "MIT",
87 | "bugs": {
88 | "url": "https://github.com/joy-web/react-alloytouch/issues"
89 | },
90 | "homepage": "https://github.com/joy-web/react-alloytouch#readme"
91 | }
92 |
--------------------------------------------------------------------------------
/publish/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-alloytouch",
3 | "version": "0.4.1",
4 | "author": {
5 | "name": "Linder Wang",
6 | "email": "linder0209@126.com",
7 | "url": "https://github.com/hopefuture"
8 | },
9 | "description": "This is a react component for AlloyTouch.",
10 | "keywords": [
11 | "react",
12 | "alloyTouch"
13 | ],
14 | "main": "lib/index.js",
15 | "module": "es/index.js",
16 | "jsnext:main": "es/index.js",
17 | "scripts": {},
18 | "dependencies": {
19 | "alloytouch": "^0.2.5"
20 | },
21 | "engines": {
22 | "node": ">=6.9.1"
23 | },
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/joy-web/react-alloytouch.git"
27 | },
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/joy-web/react-alloytouch/issues"
31 | },
32 | "homepage": "https://github.com/joy-web/react-alloytouch#readme"
33 | }
34 |
--------------------------------------------------------------------------------
/sass/carousel.scss:
--------------------------------------------------------------------------------
1 | .carousel-wrapper {
2 | margin: 0 auto;
3 | overflow: hidden;
4 | position: relative;
5 | }
6 |
7 | .carousel-scroller {
8 | position: relative;
9 | font-size: 0;
10 | user-select: none;
11 | text-size-adjust: none;
12 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
13 | -webkit-touch-callout: none;
14 | }
15 | .carousel-scroller .swiper-panel{
16 | float: left;
17 | }
18 |
19 | .carousel-tabs-menu{
20 | display: flex;
21 | .carousel-tabs-item{
22 | flex: 1;
23 | text-align: center;
24 | line-height: 2.2;
25 | bordr-bottom: 2px solid transparent;
26 | }
27 | .active{
28 | color: #CF121B;
29 | border-bottom: 2px solid #CF121B;
30 | }
31 | }
32 | .carousel-nav {
33 | position: absolute;
34 | bottom: 6px;
35 | right: 10px;
36 | > a {
37 | display: inline-block;
38 | background-color: white;
39 | cursor: pointer;
40 | width: 6px;
41 | height: 6px;
42 | border-radius: 5px;
43 | border: 1px solid #808080;
44 | transition: all .5s ease-in;
45 | &.active {
46 | background-color: #ffd800;
47 | width: 10px;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/sass/index.scss:
--------------------------------------------------------------------------------
1 | .alloy-wrapper {
2 | position: absolute;
3 | z-index: 1;
4 | top: 0;
5 | bottom: 0;
6 | left: 0;
7 | right: 0;
8 | overflow: hidden;
9 | }
10 |
11 | .alloy-scroller {
12 | position: absolute;
13 | left: 0;
14 | right: 0;
15 | z-index: 1;
16 | user-select: none;
17 | text-size-adjust: none;
18 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
19 | -webkit-touch-callout: none;
20 | }
--------------------------------------------------------------------------------
/sass/pull.scss:
--------------------------------------------------------------------------------
1 | .pull-panel {
2 | }
3 |
4 | .pull-header {
5 | position: absolute;
6 | z-index: 2;
7 | top: 0;
8 | left: 0;
9 | right: 0;
10 | }
11 |
12 | .pull-footer {
13 | position: absolute;
14 | z-index: 2;
15 | bottom: 0;
16 | left: 0;
17 | right: 0;
18 | }
19 |
20 | .pull-body {
21 | position: absolute;
22 | top: 0;
23 | bottom: 0;
24 | left: 0;
25 | right: 0;
26 | }
27 |
28 | .pull-wrapper {
29 | position: absolute;
30 | z-index: 1;
31 | top: 0;
32 | bottom: 0;
33 | left: 0;
34 | right: 0;
35 | overflow: hidden;
36 | }
37 |
38 | .pull-scroller {
39 | position: absolute;
40 | left: 0;
41 | right: 0;
42 | z-index: 1;
43 | user-select: none;
44 | text-size-adjust: none;
45 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
46 | -webkit-touch-callout: none;
47 | }
48 |
49 | .pull-refresh {
50 | position: absolute;
51 | top: -40px;
52 | left: 0;
53 | right: 0;
54 | display: block;
55 | overflow: hidden;
56 | }
57 |
58 | .pull-refresh-icon-wrapper {
59 | position: relative;
60 | width: 40px;
61 | margin: auto;
62 | text-align: center;
63 | height: 25px;
64 | }
65 |
66 | .pull-refresh-icon {
67 | position: absolute;
68 | top: 0;
69 | left: 12px;
70 | width: 14px;
71 | height: 25px;
72 | background-size: contain;
73 | background-position: center;
74 | background-repeat: no-repeat;
75 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNOS44NTQgMTkuMzU0bDYtNmEuNS41IDAgMCAwLS43MDctLjcwN0wxMCAxNy43OTNWMS41YS41LjUgMCAwIDAtMSAwdjE2LjI5M2wtNS4xNDUtNS4xNDZhLjUuNSAwIDAgMC0uNzA3LjcwOGw2IDZhLjUuNSAwIDAgMCAuNzA3IDB6Ii8+PC9zdmc+);
76 | }
77 |
78 | .pull-refresh-icon.rotate {
79 | transform: translate3d(0, 0, 0) rotate(180deg);
80 | }
81 |
82 | .pull-refresh-icon.loading {
83 | animation: pull-loading 0.8s infinite linear;
84 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MzIiIGhlaWdodD0iOTMyIiB2aWV3Qm94PSIwIDAgOTMyIDkzMiI+PHBhdGggZD0iTTQ2NiA5MzJjLTEyNC40NzMgMC0yNDEuNDk1LTQ4LjQ3My0zMjkuNTEzLTEzNi40ODdDNDguNDczIDcwNy40OTUgMCA1OTAuNDczIDAgNDY2YzAtODguMTM4IDI0Ljc0LTE3My45NjIgNzEuNTQ0LTI0OC4xOTIgNDUuNTA4LTcyLjE3MiAxMDkuODIzLTEzMC40OSAxODUuOTk2LTE2OC42NTJsMzkuMTM3IDc4LjEyQzIzNC43NTIgMTU4LjMgMTgyLjQ2IDIwNS43MiAxNDUuNDU1IDI2NC40MSAxMDcuNDYgMzI0LjY3IDg3LjM3NSAzOTQuMzc4IDg3LjM3NSA0NjZjMCAyMDguNzc0IDE2OS44NTMgMzc4LjYyNiAzNzguNjI2IDM3OC42MjZTODQ0LjYyNyA2NzQuNzc0IDg0NC42MjcgNDY2YzAtNzEuNjItMjAuMDg0LTE0MS4zMy01OC4wNzctMjAxLjU5LTM3LjAwOC01OC42OS04OS4zLTEwNi4xMS0xNTEuMjIzLTEzNy4xMzNsMzkuMTM3LTc4LjEyYzc2LjE3MyAzOC4xNiAxNDAuNDkgOTYuNDggMTg1Ljk5NiAxNjguNjVDOTA3LjI2MiAyOTIuMDQgOTMyLjAwMiAzNzcuODY0IDkzMi4wMDIgNDY2YzAgMTI0LjQ3My00OC40NzMgMjQxLjQ5NS0xMzYuNDg3IDMyOS41MTNDNzA3LjQ5NyA4ODMuNTI3IDU5MC40NzUgOTMyIDQ2Ni4wMDIgOTMyeiIvPjwvc3ZnPg==);
85 | }
86 |
87 | @keyframes pull-loading {
88 | from {
89 | transform: translate3d(0, 0, 0) rotate(0deg);
90 | }
91 | to {
92 | transform: translate3d(0, 0, 0) rotate(360deg);
93 | }
94 | }
95 |
96 | .pull-refresh-text {
97 | color: #666;
98 | font-size: 12px;
99 | text-align: center;
100 | }
101 |
102 | // 加载更多
103 | .pull-load-more {
104 | position: absolute;
105 | bottom: 5px;
106 | left: 0;
107 | right: 0;
108 | visibility: hidden;
109 | }
110 |
111 | .pull-load-more-icon {
112 | height: 20px;
113 | width: 20px;
114 | margin: 0 auto;
115 | color: #666;
116 | background-size: contain;
117 | background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNOS44NTQgMTkuMzU0bDYtNmEuNS41IDAgMCAwLS43MDctLjcwN0wxMCAxNy43OTNWMS41YS41LjUgMCAwIDAtMSAwdjE2LjI5M2wtNS4xNDUtNS4xNDZhLjUuNSAwIDAgMC0uNzA3LjcwOGw2IDZhLjUuNSAwIDAgMCAuNzA3IDB6Ii8+PC9zdmc+) center no-repeat;
118 | transform: rotate(180deg);
119 | }
120 |
121 | .pull-load-more-icon.hide {
122 | display: none;
123 | }
124 |
125 | .pull-load-more-icon.rotate {
126 | transform: rotate(0deg);
127 | }
128 |
129 | .pull-load-more-icon.loading {
130 | display: block;
131 | background: transparent url('data:image/svg+xml;charset=utf-8,') center no-repeat;
132 | background-size: 20px 20px;
133 | animation: pull-load-more 1s step-end infinite;
134 | }
135 |
136 | .pull-load-more-text {
137 | font-size: 12px;
138 | margin-top: 5px;
139 | color: #666;
140 | text-align: center;
141 | }
142 |
143 | @keyframes pull-load-more {
144 | 0% {
145 | transform: rotate(0deg)
146 | }
147 | 8.33333333% {
148 | transform: rotate(30deg)
149 | }
150 | 16.66666667% {
151 | transform: rotate(60deg)
152 | }
153 | 25% {
154 | transform: rotate(90deg)
155 | }
156 | 33.33333333% {
157 | transform: rotate(120deg)
158 | }
159 | 41.66666667% {
160 | transform: rotate(150deg)
161 | }
162 | 50% {
163 | transform: rotate(180deg)
164 | }
165 | 58.33333333% {
166 | transform: rotate(210deg)
167 | }
168 | 66.66666667% {
169 | transform: rotate(240deg)
170 | }
171 | 75% {
172 | transform: rotate(270deg)
173 | }
174 | 83.33333333% {
175 | transform: rotate(300deg)
176 | }
177 | 91.66666667% {
178 | transform: rotate(330deg)
179 | }
180 | 100% {
181 | transform: rotate(360deg)
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import precss from 'precss';
4 | import autoprefixer from 'autoprefixer';
5 |
6 | const webpackConfig = {
7 | devtool: 'source-map',
8 | resolve: {
9 | //自动扩展文件后缀名
10 | extensions: ['.js', '.jsx', '.scss']
11 | },
12 | entry: {
13 | index: ['./js/index.js']
14 | },
15 | externals: {
16 | react: 'react',
17 | 'react-dom': 'react-dom',
18 | 'prop-types': 'prop-types'
19 | },
20 | output: {
21 | path: path.join(__dirname, 'publish/dist'), //打包输出目录
22 | publicPath: './', //生成文件基于上下文路径
23 | library: ['reactAlloyTouch'],
24 | libraryTarget: 'umd'
25 | },
26 | module: {
27 | rules: [
28 | // https://github.com/MoOx/eslint-loader
29 | {
30 | enforce: 'pre',
31 | test: /\.js$/,
32 | exclude: /node_modules/,
33 | use: 'eslint-loader'
34 | },
35 | {
36 | test: /\.js$/,
37 | exclude: /node_modules/,
38 | use: 'babel-loader',
39 | }
40 | ],
41 | },
42 |
43 | plugins: [
44 | // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
45 | //用来优化生成的代码 chunk,合并相同的代码
46 | new webpack.optimize.AggressiveMergingPlugin(),
47 | //用来保证编译过程不出错
48 | new webpack.NoEmitOnErrorsPlugin(),
49 | new webpack.DefinePlugin({
50 | 'process.env': {
51 | NODE_ENV: JSON.stringify('production')
52 | }
53 | }),
54 | new webpack.LoaderOptionsPlugin({
55 | options: {
56 | // eslint 配置
57 | eslint: {
58 | emitError: true, // 验证失败，终止
59 | configFile: '.eslintrc'
60 | },
61 | postcss () {
62 | return {
63 | defaults: [precss, autoprefixer],
64 | cleaner: [autoprefixer({
65 | flexbox: 'no-2009',
66 | browsers: ['Chrome >= 35', 'Firefox >= 38',
67 | 'Android >= 4.3', 'iOS >=8', 'Safari >= 8']
68 | })]
69 | };
70 | },
71 | }
72 | })
73 | ]
74 | };
75 |
76 | module.exports = webpackConfig;
77 |
--------------------------------------------------------------------------------
/webpack.config.example.babel.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import HtmlwebpackPlugin from 'html-webpack-plugin';
4 | import precss from 'precss';
5 | import autoprefixer from 'autoprefixer';
6 |
7 | const ip = '0.0.0.0';
8 | const port = 9090;
9 | const hotDevServer = 'webpack/hot/dev-server';
10 | // https://github.com/webpack/webpack-dev-server
11 | const webpackDevServer = `webpack-dev-server/client?http://${ip}:${port}`;
12 |
13 | const appPath = path.resolve(__dirname, 'examples');
14 |
15 | const webpackConfig = {
16 | cache: true,
17 | devtool: 'source-map', //生成 source map文件
18 | stats: {
19 | colors: true,
20 | reasons: true
21 | },
22 | devServer: {
23 | //指定根目录路径，比如访问 eruda.min.js 时，只需 http://localhost:9090/eruda.min.js 即可
24 | contentBase: './examples',
25 | historyApiFallback: true,
26 | hot: true,
27 | stats: {
28 | colors: true
29 | },
30 | watchOptions: {
31 | aggregateTimeout: 300,
32 | poll: 1000
33 | },
34 | quiet: false, // 设为true，不把任何信息输出到控制台
35 | open: true,
36 | },
37 | resolve: {
38 | //自动扩展文件后缀名
39 | extensions: ['.js', '.jsx', '.scss']
40 | },
41 |
42 | // 入口文件 让webpack用哪个文件作为项目的入口
43 | entry: {
44 | index: ['./examples/index.js', webpackDevServer, hotDevServer],
45 | simple: ['./examples/simple.js', webpackDevServer, hotDevServer],
46 | pull: ['./examples/pull.js', webpackDevServer, hotDevServer],
47 | 'header-footer': ['./examples/header-footer.js', webpackDevServer, hotDevServer],
48 | carousel: ['./examples/carousel.js', webpackDevServer, hotDevServer],
49 | 'pull-carousel': ['./examples/pull-carousel.js', webpackDevServer, hotDevServer],
50 | 'pull-carousel2': ['./examples/pull-carousel2.js', webpackDevServer, hotDevServer],
51 | 'tabs-carousel': ['./examples/tabs-carousel.js', webpackDevServer, hotDevServer]
52 | },
53 |
54 | // 出口 让webpack把处理完成的文件放在哪里
55 | output: {
56 | path: path.resolve(__dirname, 'examples/dist'), //打包输出目录
57 | filename: '[name].[hash].bundle.js', //文件名称
58 | publicPath: './' //资源路径
59 | },
60 |
61 | module: {
62 | rules: [
63 | // https://github.com/MoOx/eslint-loader
64 | {
65 | enforce: 'pre',
66 | test: /\.js$/,
67 | exclude: /node_modules/,
68 | use: 'eslint-loader'
69 | },
70 | {
71 | test: /\.js$/,
72 | exclude: /node_modules/,
73 | use: 'babel-loader',
74 | },
75 | {
76 | test: /\.scss$/,
77 | use: ['style-loader', 'css-loader', 'postcss-loader?pack=cleaner', 'sass-loader?outputStyle=expanded'],
78 | }
79 | ]
80 | },
81 |
82 | plugins: [
83 | new webpack.HotModuleReplacementPlugin(), // 热部署替换模块
84 | new webpack.NoEmitOnErrorsPlugin(),
85 | new webpack.LoaderOptionsPlugin({
86 | debug: true,
87 | options: {
88 | // eslint 配置
89 | eslint: {
90 | emitError: true, // 验证失败，终止
91 | configFile: '.eslintrc'
92 | },
93 | postcss () {
94 | return {
95 | defaults: [precss, autoprefixer],
96 | cleaner: [autoprefixer({
97 | flexbox: 'no-2009',
98 | browsers: ['Chrome >= 35', 'Firefox >= 38',
99 | 'Android >= 4.3', 'iOS >=8', 'Safari >= 8']
100 | })]
101 | };
102 | },
103 | }
104 | })
105 | ]
106 | };
107 |
108 | //创建 HtmlWebpackPlugin 的实例
109 | // https://www.npmjs.com/package/html-webpack-plugin
110 | const {entry} = webpackConfig;
111 |
112 | // 为 HtmlwebpackPlugin 设置配置项，与 entry 键对应，根据需要设置其参数值
113 | const htmlwebpackPluginConfig = {
114 | index: {
115 | title: 'React AlloyTouch 例子'
116 | },
117 | simple: {
118 | title: 'React AlloyTouch 简单例子'
119 | },
120 | pull: {
121 | title: '下拉刷新，上拉加载更多'
122 | },
123 | 'header-footer': {
124 | title: '带头部和底部的下拉刷新，上拉加载更多'
125 | },
126 | carousel: {
127 | title: '轮播'
128 | },
129 | 'pull-carousel': {
130 | title: '下拉刷新中包含轮播图'
131 | },
132 | 'pull-carousel2': {
133 | title: '下拉刷新中包含轮播图2'
134 | },
135 | 'tabs-carousel': {
136 | title: '自定义轮播内容+tabs'
137 | }
138 | };
139 |
140 | for (const key in entry) {
141 | if (entry.hasOwnProperty(key) && key !== 'vendors') {
142 | webpackConfig.plugins.push(
143 | new HtmlwebpackPlugin({
144 | title: htmlwebpackPluginConfig[key].title,
145 | template: path.resolve(appPath, 'templates/layout.html'),
146 | filename: `${key}.html`,
147 | //chunks这个参数告诉插件要引用entry里面的哪几个入口
148 | chunks: [key, 'vendors'],
149 | //要把script插入到标签里
150 | inject: 'body'
151 | })
152 | );
153 | }
154 | }
155 |
156 | export default {
157 | webpackConfig,
158 | ip,
159 | port
160 | };
161 |
--------------------------------------------------------------------------------
/webpack.config.example.dist.babel.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
4 | import HtmlwebpackPlugin from 'html-webpack-plugin';
5 | import precss from 'precss';
6 | import autoprefixer from 'autoprefixer';
7 |
8 | const appPath = path.resolve(__dirname, 'examples');
9 |
10 | // multiple extract instances
11 | const extractSass = new ExtractTextPlugin({
12 | filename: 'css/[name].[chunkhash].css',
13 | disable: false,
14 | allChunks: true
15 | });
16 |
17 | const webpackConfig = {
18 | devtool: 'source-map', //生成 source map文件
19 | resolve: {
20 | //自动扩展文件后缀名
21 | extensions: ['.js', '.jsx', '.scss']
22 | },
23 |
24 | // 入口文件 让webpack用哪个文件作为项目的入口
25 | entry: {
26 | index: ['./examples/index.js'],
27 | simple: ['./examples/simple.js'],
28 | pull: ['./examples/pull.js'],
29 | 'header-footer': ['./examples/header-footer.js'],
30 | carousel: ['./examples/carousel.js'],
31 | 'pull-carousel': ['./examples/pull-carousel.js'],
32 | 'pull-carousel2': ['./examples/pull-carousel2.js'],
33 | 'tabs-carousel': ['./examples/tabs-carousel.js']
34 | },
35 |
36 | // 出口 让webpack把处理完成的文件放在哪里
37 | output: {
38 | path: path.resolve(__dirname, 'examples-dist'), //打包输出目录
39 | filename: '[name].[hash].bundle.js', //文件名称
40 | publicPath: './' //资源路径
41 | },
42 |
43 | module: {
44 | rules: [
45 | {
46 | test: /\.js$/,
47 | exclude: /node_modules/,
48 | use: 'babel-loader',
49 | },
50 | {
51 | test: /\.scss$/,
52 | use: ExtractTextPlugin.extract({
53 | fallback: 'style-loader',
54 | use: ['css-loader', 'postcss-loader?pack=cleaner', 'sass-loader?outputStyle=expanded'],
55 | publicPath: '/dist'
56 | })
57 | }
58 | ],
59 | },
60 |
61 | plugins: [
62 | // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
63 | //用来优化生成的代码 chunk,合并相同的代码
64 | new webpack.optimize.AggressiveMergingPlugin(),
65 | //用来保证编译过程不出错
66 | new webpack.NoEmitOnErrorsPlugin(),
67 | extractSass,
68 | //http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/
69 | new webpack.DefinePlugin({
70 | 'process.env': {
71 | NODE_ENV: JSON.stringify('production')
72 | }
73 | }),
74 | // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
75 | // 相当于命令参数 --optimize-minimize
76 | new webpack.optimize.UglifyJsPlugin({
77 | sourceMap: true,
78 | compress: {
79 | warnings: true
80 | },
81 | mangle: {
82 | except: [] // 设置不混淆变量名
83 | }
84 | }),
85 | new webpack.LoaderOptionsPlugin({
86 | minimize: true,
87 | options: {
88 | postcss () {
89 | return {
90 | defaults: [precss, autoprefixer],
91 | cleaner: [autoprefixer({
92 | flexbox: 'no-2009',
93 | browsers: ['Chrome >= 35', 'Firefox >= 38',
94 | 'Android >= 4.3', 'iOS >=8', 'Safari >= 8']
95 | })]
96 | };
97 | },
98 | }
99 | })
100 | ]
101 | };
102 |
103 | //创建 HtmlWebpackPlugin 的实例
104 | // https://www.npmjs.com/package/html-webpack-plugin
105 | const {entry} = webpackConfig;
106 |
107 | // 为 HtmlwebpackPlugin 设置配置项，与 entry 键对应，根据需要设置其参数值
108 | const htmlwebpackPluginConfig = {
109 | index: {
110 | title: 'React AlloyTouch 例子'
111 | },
112 | simple: {
113 | title: 'React AlloyTouch 简单例子'
114 | },
115 | pull: {
116 | title: '下拉刷新，上拉加载更多'
117 | },
118 | 'header-footer': {
119 | title: '带头部和底部的下拉刷新，上拉加载更多'
120 | },
121 | carousel: {
122 | title: '轮播'
123 | },
124 | 'pull-carousel': {
125 | title: '下拉刷新中包含轮播图'
126 | },
127 | 'pull-carousel2': {
128 | title: '下拉刷新中包含轮播图2'
129 | },
130 | 'tabs-carousel': {
131 | title: '自定义轮播内容+tabs'
132 | }
133 | };
134 |
135 | for (const key in entry) {
136 | if (entry.hasOwnProperty(key) && key !== 'vendors') {
137 | webpackConfig.plugins.push(
138 | new HtmlwebpackPlugin({
139 | title: htmlwebpackPluginConfig[key].title,
140 | template: path.resolve(appPath, 'templates/layout.html'),
141 | filename: `${key}.html`,
142 | //chunks这个参数告诉插件要引用entry里面的哪几个入口
143 | chunks: [key, 'vendors'],
144 | //要把script插入到标签里
145 | inject: 'body'
146 | })
147 | );
148 | }
149 | }
150 |
151 | export default webpackConfig;
152 |
--------------------------------------------------------------------------------
{header}
) : null}
382 |
383 | {
384 | refresh ? (
398 | {footer ? (
385 |
) : null
390 | }
391 |
386 |
387 |
388 | {enableText ? ({refreshText}
) : null}
389 |
392 |
396 | {this.renderLoadMore()}
397 |
393 | {children}
394 |
395 | {footer}
) : null}
399 |