看见一些代码的产物，会觉得非常的漂亮~感谢无私开源的程序员们~你们是最可爱的人儿~~
//index.jsx
require('./app/lib/common.css');
import React from 'react';
import ReactDOM from 'react-dom';
import Search from './app/components/search.jsx';
import Header from './app/components/header.jsx';
import Otherapp from './app/components/otherapp.jsx';
import Spike from './app/components/spike.jsx';
import More from './app/components/more.jsx';
import Like from './app/components/like.jsx';
ReactDOM.render(
<div>
<Search />
<Header source="http://localhost:3000/data/swiper" />
<Otherapp source="http://localhost:3000/data/otherapp" />
<Spike source="http://localhost:3000/data/spike" />
<More source="http://localhost:3000/data/more" />
<Like source="http://localhost:3000/data/like" />
</div>,
document.querySelector("#myApp")
);
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<title>JD_demo</title>
<style>
.bg {
background: #f3f5f7;
}
</style>
</head>
<body class="bg">
<div class="container">
<div id="myApp"></div>
</div>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
//封装的jsonp.js
//app/util/jsonp.js
;(function () {
/**
* JSONP操作
* @param url : 请求的url
* @param data : 发送数据
* @param jsonpcallback : 服务器给出的JSONP端口的API名称
* @param callback : 执行JSONP获取数据的回调函数
*/
var jsonp = function (url, data, jsonpcallback, callback) {
var cbName = 'cb' + jsonp.count++;
var callbackName = 'window.jsonp.' + cbName;
window.jsonp[cbName] = function (jsonpData) {
try {
callback(jsonpData);
} finally {
script.parentNode.removeChild(script);
delete window.jsonp[cbName];
}
};
var script = document.createElement('script');
if (data) {
data = tool.encodeToURIString(data);
}
if (typeof jsonpcallback === 'string') {
var jsonpData = jsonpcallback + '=' + callbackName;
}
url = tool.hasSearch(url, data);
url = tool.hasSearch(url, jsonpData);
script.src = url;
document.body.appendChild(script);
};
jsonp.count = 0;
window.jsonp = jsonp;
var tool = {
encodeToURIString: function (data) {
if (!data) return '';
if (typeof data === 'string') return data;
var arr = [];
for (var n in data) {
if (!data.hasOwnProperty(n)) continue;
arr.push(encodeURIComponent(n) + '=' + encodeURIComponent(data[n]));
}
return arr.join('&');
},
hasSearch: function (url, padString) {
if (!padString) return url;
if (typeof padString !== 'string') return url;
return url + (/\?/.test(url) ? '&' : '?') + padString;
}
}
})();
module.exports = jsonp;
//app/components/header.jsx
require("./header.css");
require('../lib/swiper.min.css');
let Swiper = require('../lib/swiper.min.js');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Header = React.createClass({
getInitialState: function() {
return {
imgUrls: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
if(data.status) {
//如果组件渲染到了 DOM 中，isMounted() 返回 true。
//可以使用该方法保证 setState() 和 forceUpdate()
//在异步场景下的调用不会出错。
console.log('data.status.....',data.status);
if(this.isMounted()) {
this.setState({
imgUrls: data.data,
})
new Swiper ('#header .swiper-container', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay : 3000,
autoplayDisableOnInteraction : false,
})
}
}else {
alert(data.msg);
}
});
},
render: function () {
let countId = 0;
return (
<div id="header">
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.imgUrls.map((url) => {
return <div className="swiper-slide" key={"header" + countId++} >
<img className="img" src={url} />
</div>
})
}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
);
}
})
module.exports = Header;
//app/components/search.jsx
require('./search.css');
import React from 'react';
let Search = React.createClass({
getInitialState: function() {
return {
bg: "transparent",
}
},
componentDidMount: function() {
//向下滑动，搜索框固定不变，滚动一定距离，就改变背景色
window.onscroll = (event) => {
let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
let optatic = 0.8 * (realHeight/142);
if(optatic <= 0.8 ) {
this.setState({
bg: `rgba(234, 44, 44, ${optatic})`,
})
}
}
},
render: function() {
let bColor = this.state.bg ? this.state.bg : 'transprent';
return (
<div id="search" className="pf" style={{ background: bColor }}>
<div className="search pr">
<div className="sl pa">
<i></i>
</div>
<div className="frc pr">
<span className="searchicon pa"></span>
<form>
<input placeholder="全场畅饮，部分低至99减50" type="text"/>
</form>
</div>
<div className="sub pa">
<span>登录</span>
</div>
</div>
</div>
);
}
})
module.exports = Search;
//app/components/like.jsx
require('./like.css');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Like = React.createClass({
getInitialState: function() {
return {
stores: [],
}
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
console.log('aaaaa',data);
if(data.status) {
if(this.isMounted()) {
this.setState({
stores: data.data,
});
}
}else {
alert(data.msg);
reject("get data error!")
}
})
},
render: function() {
let countId = 0;
return (
<div id="like">
<p>猜你喜欢</p>
{
this.state.stores.map((item) => {
return <div className="like_content" key={"like" + countId++}>
<div className="like_link">
<a href={ item.url }>
<img src={ item.icon } alt=""/>
</a>
</div>
<div className="like_desc">
<span>
{ item.desc }
</span>
</div>
<div className="like_price">
<span>¥{ item.price }</span>
<div><a href={ item.more }>看相似</a></div>
</div>
</div>
})
}
</div>
);
}
})
module.exports = Like;
//app/components/more.jsx
require('./more.css');
require('../lib/swiper.min.css');
let Swiper = require('../lib/swiper.min.js');
let jsonp = require('../util/jsonp.js');
import React from 'react';
var More = React.createClass({
getInitialState: function() {
return {
more1: [],
more2: [],
more3: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
console.log('~~~~~~data',data);
if(data.status) {
// 将值分成了三部分，进行处理
if(this.isMounted()) {
this.setState({
more1: data.data.slice(0,3),
more2: data.data.slice(3,5),
more3: data.data.slice(5,7),
})
new Swiper ('.more_bottom .swiper-container', {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay : 2000,
autoplayDisableOnInteraction : false,
})
}
}else {
alert(data.msg);
}
});
},
render: function() {
let countId = 0;
return (
<div id="more">
<div className="more_top">
{
this.state.more1.map((item) => {
return <div className="more_link" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="more_middle">
{
this.state.more2.map((item) => {
return <div className="more_style" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="more_bottom">
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.more3.map((item) => {
return <div className="swiper-slide" key={"more" + countId++}>
<a href={item.url}>
<img src={item.icon} alt=""/>
</a>
</div>
})
}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
</div>
);
}
})
module.exports = More;
//app/components/otherapp.jsx
require('./otherapp.css');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Otherapp = React.createClass({
getInitialState: function() {
return {
apps: [],
};
},
componentDidMount: function() {
jsonp(this.props.source, "", "callback", (data) => {
console.log('otherapp',data);
if(data.status) {
if(this.isMounted()) {
this.setState({
apps: data.data,
})
}
}else {
alert(data.msg);
}
});
},
render: function() {
let countId = 0;
return (
<div className="oapp">
<ul>
{
this.state.apps.map((app) => {
return <li key={ "otherapp" + countId++ }>
<a href={ app.url }>
<div className="app_icon">
<img src={ app.icon } alt=""/>
</div>
<span>{ app.title }</span>
</a>
</li>
})
}
</ul>
</div>
);
}
})
module.exports = Otherapp;//app/components/spike.jsx
require('./spike.css');
let jsonp = require('../util/jsonp.js');
import React from 'react';
let Spike = React.createClass({
getInitialState: function() {
return {
hour: "00",
minutes: "00",
second: "00",
stores: [],
more: ""
}
},
formatTime: function(times=0) {
times = +times;
let hour = 0,
minutes = 0,
second = 0,
regTwo = /^\d{2}$/,
regInteger = /^(\d{1,2})\.?\d*$/;
if(times/3600 >= 1) {
hour = times/3600;
hour = +regInteger.exec(hour.toString())[1]
times -= hour*3600;
hour = regTwo.test(hour.toString()) ? hour.toString() : `0${hour}`;
}
if(times/60 >= 1) {
minutes = times/60;
minutes = +regInteger.exec(minutes.toString())[1]
times -= minutes*60;
minutes = regTwo.test(minutes.toString()) ? minutes.toString() : `0${minutes}`;
}
second = times;
second = regTwo.test(second.toString()) ? second.toString() : `0${second}`;
return {
hour: hour,
minutes: minutes,
second: second,
}
},
componentDidMount: function() {
let getData = () => {
let promise = new Promise((resolve, reject) => {
jsonp(this.props.source, "", "callback", (data) => {
console.log('seeedata....',data);
if(data.status) {
if(this.isMounted()) {
this.setState({
stores: data.data,
more: data.more,
});
resolve(data.times);
}
}else {
alert(data.msg);
reject("get data error!")
}
})
})
return promise;
}
getData().then((times) => {
times = +times;
let timer = window.setInterval(() => {
let {hour, minutes, second} = this.formatTime(times--);
if(times == -1) {
clearInterval(timer);
timer = null;
}
this.setState({
hour: hour,
minutes: minutes,
second: second,
});
}, 1000);
}, (err) => {
alert(err);
});
},
render: function() {
let countId = 0;
return (
<div id="spike">
<div className="spike_header">
<i></i>
<span className="spike_title">掌上时间</span>
<div className="spike_time">
{
(() => {
return <div>
<span>{this.state.hour}</span>:<span>{this.state.minutes}</span>:<span>{this.state.second}</span>
</div>
})()
}
</div>
<div className="spike_more fr">
<i className="fr"></i>
<a href={this.state.more}>
<span>更多秒杀</span>
</a>
</div>
<div style={{clear:"both"}}></div>
</div>
<ul className="spike_content">
{
this.state.stores.map((item) => {
return <li key={"spike" + countId++}>
<a href={item.url}>
<div>
<img src={item.icon} alt=""/>
</div>
<p>¥{item.sprice}</p>
<p className="real-price">¥{item.price}</p>
</a>
</li>
})
}
</ul>
</div>
);
}
})
module.exports = Spike;感谢无私开源的程序员哟，可以点击项目的哟