如何在 famo.us 中使用滑块组件？答案

【问题标题】：How to use slider component in famo.us?如何在 famo.us 中使用滑块组件？
【发布时间】：2015-04-05 09:00:49
【问题描述】：

我的应用程序需要在按钮拖动时改变范围的可拖动滑块（如 jqueryui 范围滑块）。如果我们检查，在 Famous.js 中定义了滑块组件，但在文档中没有描述使用。有谁告诉我怎么用？

【问题讨论】：

【解决方案1】：

我使用了 Draggable Famous 修饰符。

var Draggable = require("famous/modifiers/Draggable")
var drag = {};
drag.item = new Draggable({
        xRange: [0,210],
        yRange: [0, 0]
    })
drag.item.on('end',function(){
        var state = this._positionState.state;
        //IF THE DRAG REACHES A POINT THEN DO SOMETHING
        //IF NOT THEN SNAP BACK TO ORIGINAL POSITION
        if(state[0] >= `SOME VALUE`){
            return somFunc();
        }
        else{
            drag.item.setPosition([0,0,0],{curve:'linear',duration:100})
        }
})

【讨论】：

【解决方案2】：

截至version 0.3.5 的Famo.us 没有Range Slider。

Famo.us 中的Slider 只是一个使用range: [start, end] 的简单滑块。您可以设置从start 到end 的值。

在我看来，Famo.us 中的Slider 更像是一个进度条。

片段示例：滑块（绿色）和拉动按钮（蓝色）

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var ImageSurface = require('famous/surfaces/ImageSurface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Draggable = require('famous/modifiers/Draggable');
  var Slider = require('famous/widgets/Slider');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');

  var mainContext = Engine.createContext();

  var lower = 100;
  var upper = 400;
  var thick = 25;

  var slider = new Slider({
    size: [upper, thick],
    indicatorSize: [upper-lower, thick],
    labelSize: [upper, thick],
    range: [lower, upper],
    precision: 0,
    value: 0,
    label: '',
    fillColor: 'rgba(100, 255, 0, 1)'
  });
  slider.set((upper-lower)/2);

  var pullButton = new Draggable({
    xRange: [0, upper-lower],
    yRange: [0, 0]
  });
  pullButton.surface = new Surface({
    size: [10, 25],
    properties: { 
      backgroundColor: 'rgba(0,0,250,0.8)',
      border: '1px solid black',
      cursor: 'pointer'
    }
  });
  pullButton.on('update', function(e) {
    var pos = e.position;
    slider.set(pos[0]+lower);
  });
  pullButton.subscribe(pullButton.surface);
  pullButton.setPosition([slider.get()-lower, 0]);

  slider.on('change', function(data) {
     console.log('slider value', data.value);
  });
  
  var placeNode = new Modifier({
    origin: [0, 0],
    align: [0, 0],
    transform: Transform.translate(20, 20, 0)
  });
  var mainNode = mainContext.add(placeNode)
  
  mainNode.add(new Modifier({transform: Transform.translate(-10, thick, 0)})).add(pullButton).add(pullButton.surface);
  mainNode.add(slider);

  
});

require(['main']);

<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>

【讨论】：