小程序 slider 双向滑动

最新推荐文章于 2023-12-13 13:15:31 发布

Hero_rong

最新推荐文章于 2023-12-13 13:15:31 发布

阅读量4.2k

点赞数 7

分类专栏：小程序 js

本文链接：https://blog.csdn.net/Hero_rong/article/details/101057530

版权

本文介绍了如何在小程序中创建一个双向滑动的效果，由于官方暂不支持slider双向滑动，作者通过组合两个slider来实现这一功能，并附带了手机录屏的gif演示。

摘要由CSDN通过智能技术生成

先上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。

直接上代码，小程序暂时不支持slider双向滑动，所以把两个slider拼起来用

<view class='sliderHCon'>
  <view class='showMoney'>
    <text class='MoneyValue'>￥{
  {min}}</text>
    <text class='MoneyValue'>￥{
  {max}}</text>
  </view>

  <view class='twoSlider'>
    <view class='select-construct'>
      <view class='select-area'>
        <view class='slider-container'>
          <view class='leftSliderPrice sliderPrice' style='left:{
  {leftSliderPriceWidthX}};'>
            <view class='sliderView'>
              ￥{
  {slider1Value*scale}}
            </view>
          </view>
          <slider style='width:{
  {slider1W+"%"}}' class='slider-left' min='{
  {min}}' max='{
  {slider1Max}}' color='#FFAC30'
          selected-color='#e5e5e5' bindcha