diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..65df6b9 Binary files /dev/null and b/.DS_Store differ diff --git a/examples/.DS_Store b/examples/.DS_Store new file mode 100644 index 0000000..eabb966 Binary files /dev/null and b/examples/.DS_Store differ 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 0000000..4ed10da Binary files /dev/null and b/examples/waterfall/.DS_Store differ diff --git a/examples/waterfall/app.js b/examples/waterfall/app.js new file mode 100644 index 0000000..252ea2c --- /dev/null +++ b/examples/waterfall/app.js @@ -0,0 +1,101 @@ +/** @jsx React.DOM */ + +'use strict'; + +var React = require('react'); +var ReactCanvas = require('react-canvas'); +var Item = require('./components/Item'); + +var data = require('../common/mockData'); + +var Surface = ReactCanvas.Surface; +var ListView = ReactCanvas.ListView; + +var App = React.createClass({ + + render: function () { + var size = this.getSize(); + return ( + + + + ); + }, + 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 0000000..a3a1ded Binary files /dev/null and b/examples/waterfall/components/.DS_Store differ 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: {