2

ポリマー紙要素が好きで、紙スライダー要素を使用したいと考えています。

でも、縦にしたい。css を適用して回転させようとしました。

transform: rotate(90deg);

これはスライダーを回転させますが、「入力」は回転させません。「ノブ」を上下に動かすには、マウスをクリックして水平方向にドラッグする必要があります。

これは非常に迷惑であり、どんな助けも頼りにしています!

4

4 に答える 4

0

これはかなりハックな方法かもしれませんが、これを機能としてリクエストしてから 1 年が経ちましたが、まだあまり優先度が高くないようです。paper-sliderこれにより、(ほとんどの場合)サポートを継続しない可能性のあるサードパーティに依存することなく、Polymer チームからの継続的な更新が可能になると思います (私が知る限り、tk-vsliderここで言及されているカスタム要素は Polymer 1.0 をサポートするように更新されていません)。 ）。

まずはcss。90 度回転すると、小さい値がスライダーの上部にあることがわかりました。これは直感に反することがわかりました。代わりに、-90 回転します。マージンでいくつかの奇妙なことが起こりますが、これが最終的に私のためにそれをしたものです:

paper-slider {
    width: 20vh;
    margin: 10vh -10vh;
    --webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

私は独自のカスタム要素内に紙のスライダーを持っていたので、次のコードを準備完了のコールバックに入れましたが、スライダー要素を選択できる限り、必要な場所に置くことができると思います. 基本的にpaper-slider、ドラッグ イベントに応答するために使用するメソッドをオーバーライドするだけです。方法は次のとおりです。

var slider = this.$.slider;
slider._trackX = function(e) {

  if (!slider.dragging) {
    slider._trackStart(e);
  }

  var dx = Math.min(slider._maxx, Math.max(slider._minx, (-1 * e.detail.dy)));
  slider._x = slider._startx + dx;

  var immediateValue = slider._calcStep(slider._calcKnobPosition(slider._x / slider._w));
  slider._setImmediateValue(immediateValue);

  // update knob's position
  var translateY = ((slider._calcRatio(immediateValue) * slider._w) - slider._startx);
  slider.translate3d(translateY + 'px', 0, 0, slider.$.sliderKnob);
};

このメソッドのほぼ全体がpaper-slider ソース コードからコピーされています。唯一の実際の変更点は、x 座標e.detail.dxを取得する代わりに y を取得することe.detail.dyです。paper-slider負の乗数は、スライダーの下部に小さい値が必要で、スライダーを -90 度回転させた場合にのみ必要です。Polymer チームがメソッドの名前を変更した場合、_trackXこのソリューションは機能しなくなることに注意してください。これが少し遅れていることはわかっていますが、うまくいけば、他の誰かが同様の状況に陥るのに役立つことを願っています (私がしたように)。

更新:おそらくこのソリューションをもう少しテストする必要がありましたが、クリックイベントを処理するために上書きする必要がある別の関数があることがわかりました(他の関数はドラッグのみを処理します)。これを他のメソッドの下に追加することで機能するようになりました。

slider._bardown = function(event) {
  slider._w = slider.$.sliderBar.offsetWidth;
  var rect = slider.$.sliderBar.getBoundingClientRect();
  var ratio = ((rect.bottom - event.detail.y) / slider._w);
  var prevRatio = slider.ratio;

  slider._setTransiting(true);

  slider._positionKnob(ratio);

  slider.debounce('expandKnob', slider._expandKnob, 60);

  // if the ratio doesn't change, sliderKnob's animation won't start
  // and `_knobTransitionEnd` won't be called
  // Therefore, we need to manually update the `transiting` state

  if (prevRatio === slider.ratio) {
    slider._setTransiting(false);
  }

  slider.async(function() {
    slider.fire('change');
  });

  // cancel selection
  event.preventDefault();
}

このメソッドの主な変更点は、比率を計算する行です。以前はvar ratio = (event.detail.x - rect.left) / this._w;

于 2015-09-01T15:52:53.283 に答える
0

<s-slider>vertical垂直方向のプロパティがありますhttps://github.com/StartPolymer/s-slider

于 2016-11-28T19:16:47.310 に答える