我希望实现与邮箱(http://www.mailboxapp.com/)类似的功能,您可以使用Famous(http://famo.us)在列表中滑动单个项目以对其进行操作。
我尝试添加' Draggable'每个列表项的修饰符,但似乎您无法将修饰符添加到属于Scrollview的曲面。
任何人(来自Famous或其他人)都知道如何做到这一点?
答案 0 :(得分:11)
想出来。为了修改滚动视图内的曲面,需要将它们包装在RenderNode中。
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var RenderNode = require('famous/core/RenderNode');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');
var mainContext = Engine.createContext();
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0, temp; i < 40; i++) {
draggable = new Draggable( {
xRange: [-220, 220],
yRange: [0, 0],
});
item = new Surface({
content: "Surface: " + (i + 1),
size: [undefined, 200],
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
node = new RenderNode(draggable)
node.add(item);
item.pipe(draggable);
item.pipe(scrollview);
surfaces.push(node);
}
mainContext.add(scrollview);
via @(markmarijnissen)Famo.us Scrollview height)
答案 1 :(得分:1)
说明:在Scrollview
中,sequenceFrom
方法会从数组中创建ViewSequence
。只要添加的项目可以返回getSize()
,渲染就能正常工作。 RenderNode
符合此条件。您还可以创建自定义View
,因为它还会扩展RenderNode
。
下面是一个代码片段,它使用自定义视图,允许曲面拖动并根据最终位置条件显示对拖动方向的响应。
define('main', function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Scrollview = require("famous/views/Scrollview");
var DragView = require('DragView');
var mainContext = Engine.createContext();
var scrollview = new Scrollview();
var views = [];
scrollview.sequenceFrom(views);
for (var i = 0; i < 40; i++) {
var view = new DragView({
size: [undefined, 200],
content: "Surface: " + (i + 1),
backgroundColor: "hsl(" + (i * 360 / 20) + ", 100%, 70%)"
});
view._eventOutput.pipe(scrollview);
views.push(view);
}
mainContext.add(scrollview);
});
// Custom Drag View Item
define('DragView', function(require, exports, module) {
var Surface = require("famous/core/Surface");
var Scrollview = require("famous/views/Scrollview");
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var RenderController = require('famous/views/RenderController');
function _updatingDrag(e) {
var pos = e.position;
this.surface.setContent('Draggable Position is ' + pos);
}
function _endDrag(e) {
var pos = e.position;
this.surface.setContent('Draggable End Position is ' + pos);
this.draggable.setPosition([0, 0], {
duration: 300
}, function() {
this.renderer.hide();
}.bind(this));
if (pos[0] > 200) {
console.log('showing OK');
this.renderer.show(this.ok);
}
if (pos[0] < -200) {
console.log('showing Not OK');
this.renderer.show(this.not);
}
}
function DragView() {
View.apply(this, arguments);
var draggable = new Draggable({
xRange: [-220, 220],
yRange: [0, 0],
});
var item = new Surface({
content: this.options.content,
size: [undefined, 200],
properties: {
backgroundColor: this.options.backgroundColor,
lineHeight: "200px",
textAlign: "center"
}
});
var okItem = new Surface({
content: String.fromCharCode(10004),
size: [220, 200],
properties: {
color: "white",
backgroundColor: "green",
lineHeight: "200px",
fontSize: "100px",
textAlign: "center"
}
});
var notOkItem = new Surface({
content: String.fromCharCode(10006),
size: [220, 200],
properties: {
color: "white",
backgroundColor: "red",
lineHeight: "200px",
fontSize: "100px",
textAlign: "center"
}
});
var renderer = new RenderController();
draggable.subscribe(item);
draggable.on('update', _updatingDrag.bind({
surface: item
}));
draggable.on('end', _endDrag.bind({
surface: item,
draggable: draggable,
renderer: renderer,
ok: okItem,
not: notOkItem
}));
item.pipe(this._eventOutput);
this.add(draggable).add(item)
this.add(renderer);
}
DragView.prototype = Object.create(View.prototype);
DragView.prototype.constructor = DragView;
module.exports = DragView;
});
// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>