From e9f0373211ee7aea2c07ba6d8c45bdf0795df465 Mon Sep 17 00:00:00 2001 From: ygm Date: Mon, 20 Apr 2015 12:57:51 +0800 Subject: [PATCH] up --- .DS_Store | Bin 0 -> 6148 bytes examples/.DS_Store | Bin 0 -> 6148 bytes examples/common/mockData.js | 72 +++++++++++ examples/waterfall/.DS_Store | Bin 0 -> 6148 bytes examples/waterfall/app.js | 101 +++++++++++++++ examples/waterfall/components/.DS_Store | Bin 0 -> 6148 bytes examples/waterfall/components/Item.js | 160 ++++++++++++++++++++++++ examples/waterfall/index.html | 32 +++++ lib/ListView.js | 2 +- webpack.config.js | 3 +- 10 files changed, 368 insertions(+), 2 deletions(-) create mode 100644 .DS_Store create mode 100644 examples/.DS_Store create mode 100644 examples/common/mockData.js create mode 100644 examples/waterfall/.DS_Store create mode 100644 examples/waterfall/app.js create mode 100644 examples/waterfall/components/.DS_Store create mode 100644 examples/waterfall/components/Item.js create mode 100644 examples/waterfall/index.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..65df6b90f7f702449c2a99887b4f2ab3a230c9cc GIT binary patch literal 6148 zcmeHK&1&N?5SG%kb&`uqTUfdmT^CYF=ufV0+C3HmSrV3QNo{P1z_ml{Y_^1e&-)nL z-%B5(w6D-->1AgmH6&#BR466Ph|xD1X=L;XG#V;V0!7Rfp!liMcEe4(ulBb%4kxzjwPY~t*c*p&l)5qs`ct7N zZ5jFTupSR0KRIdY{o2w`yB&M8(GPw?Xv2+ymQ184Lz!M!1#BIAYc#6v?e3SwcC}g? zm&K@7tCYp=PHjB4?=9=|m%W4I@4fNwKbKe6H@9~WkNQ41Qh>6qVbVWMEHa1zVt^P} zFb2%SXO$N0Tyz{_fEai?1Nc4&P(;UIrcpf|(5VstFb{4eU}G(TF~Xo@Fw+P#AY6w6 z>QHV<46eh$FU&f}V5U)rGj56xZobS-g~HX>VSk~PGwx`lo){noW*J!0LmTt|*Z28e-$Vu0t5nn!gwlF6-ehr?VeK+ix?a9yTx5(0)w#jqAr@h4Cv;1_5BItDY1 R-~pi@0Yw9K#K5~U@E45GU^)N* literal 0 HcmV?d00001 diff --git a/examples/.DS_Store b/examples/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..eabb966c1c25e47f6f735584f584617976e543b9 GIT binary patch literal 6148 zcmeHKQE$^Q5I%Qhq}xjnAR&11D^ihKvC-G8jK@ipf;J(BNt@Ug%|E@ccLo1P7K{y=kI*Jvy;z}9Rq+E&XPWW4*(u2VXK4HAB6fz*QDh< zgu;xWA&={F8fQ9Qi)P2a$N;U~CcFX-Z?UYd-_LlOsj}+zeu&ma``YGpud}sH#lNxj zBAn~GzJv;yO`Rg~k76Lz8BR3r`;X4`~s3C$1QYhdxS{Y;~ zVUcG#e}lct%w+~6Gr$Zm16POvw}pAzSLm7fQJDc|;BpwC{XwD<1`ZpGX6wL;ejlm7 zO-O<^-6aU6!@yx<5qnUCO+~b+!d)?hO-H|Uae>3eqD=>3X2x;c%);GJgqa=v(u9Ku zEON~ZFaxU$Y}lqx=l_$x-~U&WxWx=G1OF8RqP-vP5Al`U*}C>}bk<7Lm#8EZ*I2wr kLBkxy7)wX-9aJOemt-IY4jYT;LE#?(LjzaLz@;+q3#GYdQ2+n{ literal 0 HcmV?d00001 diff --git a/examples/common/mockData.js b/examples/common/mockData.js new file mode 100644 index 0000000..9242f42 --- /dev/null +++ b/examples/common/mockData.js @@ -0,0 +1,72 @@ +module.exports = [ + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://d03.res.meilishuo.net/pic/t/7a/80/2473169c23030b561c6cf4711f9f_640_900.ch.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://d01.res.meilishuo.net/pic/t/fb/86/ca54092285b6aa8d779c75d930a4_640_900.ch.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://d02.res.meilishuo.net/pic/t/84/c8/3253dd63c6e627e0a7921eb8cad2_640_900.cc.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://d03.res.meilishuo.net/pic/t/41/69/29a396f538b9c4197479b8164c49_640_900.cg.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://d02.res.meilishuo.net/pic/t/55/bf/29e46e5ee29115421ddb5ee4d1f2_640_900.ch.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "春装显瘦休闲小脚铅笔长裤", + "pic": "http://imgtest.meiliworks.com/pic/t/9d/18/5d73d3929b4b83b22c6e253d6823_640_900.cf.jpg", + "discount": "4.0折", + "link":"http://www.meilishuo.com/" + }, + { + "price": "￥39.00", + "title": "韩版长袖露肩宽松打底衬衫", + "pic": "http://d04.res.meilishuo.net/pic/t/75/ce/42bef0ac5a2e0308f1d7aad99b7d_640_900.ch.jpg", + "discount": "2.8折", + "link":"http://www.meilishuo.com/" + } +]; diff --git a/examples/waterfall/.DS_Store b/examples/waterfall/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4ed10da9697622bfb440c9f1471f41befa214e81 GIT binary patch literal 6148 zcmeHK&x_MQ6n@j~u4(rYQ9<#Nqe77`TI#XZRq!AbE4zp*HQ59^lFgJR-72Nfvww!a z{|pbJ7ykkO6)*LBGqX!ew^tFJ7v6kt-n=huzDY6}A`s&xywQz}_dnqCqP2qF(;QclCPX z&ci2z>6^Fj-hcS`>GRib`ua)W>Ckq;;t705aHgWi-C>rh>;=Y|TO|plW9a<~v($&? zN0cr+X;57}Lfzs_q3g^k;1qBQtWm(emAvgW<1XzKa0>jt3h?_OfHSr%&J5~T2O7Nv z0G5%~hL}GAnG;xSS)3Wf2uv6%&`^clVhBS=KCpEyi!+0UPQq?Jg#BeG{wW1SdAGaU#wFRcb>-rCtqtJM;cQ$t nGk8itpqFCQ@=|;mt_}Hs17OSI%pfu__aUHVaE(*ok1FsRzL + + + ); + }, + scroll:function(listViewIns,top){ + var self = this; + if(typeof this.scrollState === 'undefined'){ + this.scrollState = 1; + } + + var scrollHeight = this.getNumberOfItems() * Item.getItemHeight(); + var distance = Item.getItemHeight() * 2; + + if(this.scrollState && (top + distance >= scrollHeight) ){ + + this.scrollState = 0; + + var style = this.getListViewStyle(); + + listViewIns.scroller.setDimensions(style.width, style.height, style.width, scrollHeight - (Item.getItemHeight() - Item.getLodingHeight())); + + setTimeout(function(){ + data = data.concat(data); + + listViewIns.updateScrollingDimensions(); + self.scrollState = 1; + },2000); + } + }, + + renderItem: function (itemIndex, scrollTop) { + var rowNum = Item.getRowNums(); + var rowData = []; + + for (var i = itemIndex; i < itemIndex + rowNum; i++) { + rowData.push(data[itemIndex + i]); + }; + + if(itemIndex + 1 === this.getNumberOfItems()){ + var loding = true; + } + + return ( + + ); + }, + + getSize: function () { + return document.getElementById('main').getBoundingClientRect(); + }, + + getListViewStyle: function () { + return { + top: 0, + left: 0, + width: window.innerWidth, + height: window.innerHeight + }; + }, + + getNumberOfItems: function () { + return Math.ceil(data.length / Item.getRowNums()); + }, + +}); + +React.render(, document.getElementById('main')); + + diff --git a/examples/waterfall/components/.DS_Store b/examples/waterfall/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a3a1ded9e30c5764a54283f2e0a9718f0857e665 GIT binary patch literal 6148 zcmeHKJxfDD5S-P30h^STS6T`FgCj&CwSOQav5`m$wSSer%YPPUKahl{mDtEE%+B53 z?z_Ax-ev*V{B3&+%m7RYXS}-`o1Z&Ic2*H16MV)Ep765V?KkV)DEs?>*Ir*(dY*EV8Bc+Lmm#&wj? nMLQ-(JLbmQ@l_;cUh_52d-0GQ<%~x;S$_sx7nv0JYXv?5|05SN literal 0 HcmV?d00001 diff --git a/examples/waterfall/components/Item.js b/examples/waterfall/components/Item.js new file mode 100644 index 0000000..f7d4aed --- /dev/null +++ b/examples/waterfall/components/Item.js @@ -0,0 +1,160 @@ +/** @jsx React.DOM */ + +'use strict'; + +var React = require('react'); +var ReactCanvas = require('react-canvas'); + +var FontFace = ReactCanvas.FontFace; +var measureText = ReactCanvas.measureText; +var Group = ReactCanvas.Group; +var Image = ReactCanvas.Image; +var Text = ReactCanvas.Text; + +var Item = React.createClass({ + + propTypes: { + width: React.PropTypes.number.isRequired, + height: React.PropTypes.number.isRequired, + data: React.PropTypes.object.isRequired, + itemIndex: React.PropTypes.number.isRequired, + }, + + statics: { + getItemHeight: function () { + return 300; + }, + getLodingHeight: function(){ + return 30; + }, + getRowNums: function(){ + return 2; + } + }, + + truncate : function(text,style){ + var maxWidth = 1000; + var textMetrics = measureText(text, maxWidth, style.fontFace, style.fontSize, style.lineHeight); + var actualWidth = textMetrics.width; + if(actualWidth >= style.width){ + var perLen = actualWidth / text.length; + var textNum = parseInt(style.width / perLen); + text = text.substr(0, textNum - 2 ) + '...'; + } + return text; + }, + + render: function () { + var self = this; + + var rowItems = this.props.data.map(function(item,index){ + var rowImageStyle = self.getImageStyle(index); + var rowTitStyle = self.getTitleStyle(index); + var priceStyle = self.getPriceStyle(index); + var btnStyle = self.getBtnStyle(index); + + var text = self.truncate(item.title,self.getTitleStyle(index)); + + return ( + + + + {text} + {item.price} + 马上抢购 + + + ); + }); + + if(this.props.loding){ + return ( + + loding... + + ) + } + + return ( + + {rowItems} + + ); + }, + + btnClick : function(data){ + return function(){ + location.href = data.link; + } + }, + + getStyle: function () { + return { + width: this.props.width, + height: Item.getItemHeight() + }; + }, + + getRowWidth : function(){ + return this.props.width / Item.getRowNums(); + }, + + getRowLeft : function(index){ + return this.getRowWidth() * index; + }, + + getImageStyle: function (index) { + return { + top: 5, + left: this.getRowLeft(index) + 5, + width: this.getRowWidth() - 5, + height: 190, + backgroundColor: '#ddd', + borderColor: '#999', + borderWidth: 1 + }; + }, + + getPriceStyle: function (index) { + return { + top: 230, + left: this.getRowLeft(index), + width: 170, + height: 18, + fontSize: 18, + lineHeight: 18, + color:'red' + }; + }, + + getBtnStyle: function(index){ + return { + top: 260, + left: this.getRowLeft(index), + width: 90, + height: 25, + textAlign: 'center', + borderRadius : 10, + fontSize: 18, + lineHeight: 25, + backgroundColor: 'red', + color:'#fff' + }; + }, + + getTitleStyle: function (index) { + return { + top: 210, + left: this.getRowLeft(index), + width: this.getRowWidth(), + fontFace: FontFace('Georgia, serif'), + height: 20, + fontSize: 14, + lineHeight: 20, + color:'#666' + }; + } + +}); + +module.exports = Item; diff --git a/examples/waterfall/index.html b/examples/waterfall/index.html new file mode 100644 index 0000000..780c5b8 --- /dev/null +++ b/examples/waterfall/index.html @@ -0,0 +1,32 @@ + + + + + + Canvas + + + +
+ + + diff --git a/lib/ListView.js b/lib/ListView.js index 7046cd8..a62384d 100644 --- a/lib/ListView.js +++ b/lib/ListView.js @@ -100,7 +100,7 @@ var ListView = React.createClass({ handleScroll: function (left, top) { this.setState({ scrollTop: top }); if (this.props.onScroll) { - this.props.onScroll(top); + this.props.onScroll(this,top); } }, diff --git a/webpack.config.js b/webpack.config.js index 00231d6..19470fe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,8 @@ module.exports = { entry: { 'listview': ['./examples/listview/app.js'], 'timeline': ['./examples/timeline/app.js'], - 'css-layout': ['./examples/css-layout/app.js'] + 'css-layout': ['./examples/css-layout/app.js'], + 'waterfall': ['./examples/waterfall/app.js'] }, output: {