WeChat アプレットにより、双方向のスライドで価格 (価格帯) を素早く選択できます

実装は次のようになります

提示：效果可以自己自定义，自己将文字样式更改为自己项目属性即可

実装方法

1. 左側に最低価格、右側に最高価格が表示されます。左側の最低価格をドラッグして価格を選択できます。右にドラッグすると最高価格が表示されます。

2. 2つの価格が重なった場合は、左にドラッグし続けると、端に達するまで左側の最安値が安くなり、端に達しない場合は右側の最高値が高くなります。

3. 対応するスケールを入力すると、さまざまな価格スケールが表示されます。

4.色とドラッグモジュールをカスタマイズ可能

5. プライスドラッグはコンポーネントとしてパッケージ化されており、呼び出すだけで対応するメソッドを実装できます。

推奨事項: コンポーネントをドラッグするときに setdata 割り当てを頻繁に呼び出さないことをお勧めします。これにより、パフォーマンスが向上します。

実装手順

ステップ 1: リソースをダウンロードし、コンポーネント内のコンポーネントを参照します (詳しくは説明しませんが、リソースは最後にダウンロードされます)。

ステップ 2: ページ上のコンポーネントを呼び出す

json：

{
  "usingComponents": {
    "range-slider": "/components/range/range-slider"
  }
}

js：
const app = getApp()
Page({
  data: {
    minValue: 0,
    maxValue: 20,
    rangeValues: [0, 20]
  },
  onLoad: function() {},
  onRangeChange: function(e) {
    this.setData({
      rangeValues: [Math.round(e.detail.minValue), Math.round(e.detail.maxValue)],
    });
  },
  onTest: function() {
    this.setData({
      rangeValues: [0, 20]
    });
  }
})


wxml：
<view style="width:600rpx">
    <range-slider width='600' height='100' block-size='50' min='0' max='20' values='{
   
   {rangeValues}}' bind:rangechange='onRangeChange'>
      <view slot='minBlock' class='range-slider-block'></view>
      <view slot='maxBlock' class='range-slider-block'></view>
    </range-slider>
  </view>

css:
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 230rpx;
}

.range-slider-block {
  border-radius: 15rpx;
  width: 100%;
  height: 100%;
  background-color: #fc4029;
  box-shadow: 0px 2rpx 14rpx 0px rgba(72,126,255,0.35);
  color:#fff;
  font-size: 17rpx;
  text-align: center;
  line-height: 29rpx;
}

.range-text {
  font-size: 18px;
}

まとめ

现在很多网上流行拖动来选择价格，方便快捷高效的选择价格，已经慢慢摒弃传统的固定选择价格。组件已经优化，兼容小屏和大屏幕的手机或者平板

喜欢的小伙伴可以下载。资源下载