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

How to use slider component in famo.us?

本文关键字：组件 famo us      更新时间：2023-09-26

我的应用程序需要可拖动的滑块，在按钮拖动时可以更改范围（如jqueryui范围滑块）。在famous.js中，如果我们检查，滑块组件是定义的，但在文档中没有描述其使用。有人告诉我如何使用它吗？

我使用了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})
        }
})

截至Famo.us的version 0.3.5，不存在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>

相关文章：