微信小程序-slider模块-双向滑动

微信小程序 同时被 2 个专栏收录
4 篇文章 0 订阅
8 篇文章 0 订阅

这里是改良的slider滑块,实现双向滑动,也是一个代码的存储
已0点到24点的时间范围选择为例
这是wxml页面

<view class='buyMian-slide'>
    <view class='flex flexSb buyMian-slide-range'>
      <!-- <view class=''>{{min}}点</view> -->
      <!-- <view class=''>{{max}}点</view> -->
    </view>
    <view class="showContentBox">
      <view wx:if='{{!change2 && !closeToFlag}}' class="show-min-content" style="left:{{showContent1+'%'}}"><text>{{slider1Value}}</text></view>
      <view wx:if='{{!change && !closeToFlag}}' class="show-max-content" style="left:{{showContent2+'%'}}"><text>{{slider2Value}}</text></view>
      <view wx:if='{{closeToFlag}}' class="show-merge-content" style="left:{{closeToPosition+'%'}}"><text>{{slider1Value}}点 - {{slider2Value}}点</text></view>
    </view>
    <view class='buyMian-slide-contain'  wx:if="{{choose==1}}">
      <slider wx:if='{{!change2}}' block-color="#fd7373" style='width:{{slider1W+"%"}};z-index:{{zIndexFlag==1?1:3}}' class='slider-left' block-size="10" value="{{slider1Value}}" min='{{min}}' max='{{slider1Max}}' backgroundColor='#fd7373' activeColor='#f7f7f7' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='1'></slider>
      <slider wx:if='{{!change}}' block-color="#fd7373" style='width:{{slider2W+"%"}};z-index:{{zIndexFlag==2?1:3}}' class='slider-right' block-size="10" value="{{slider2Value}}" min='{{slider2Min}}' max='{{max}}' backgroundColor='#f7f7f7' activeColor='#fd7373' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='2'></slider>
    </view>

  </view>

这里是wxss页面

.buyMian-slide{
  width: 654rpx;
  margin: 0 auto;
  height: 120rpx;
  box-sizing: border-box;
}
 
.buyMian-title {
  width: 654rpx;
  margin: 0 auto;
  font-size: 34rpx;
  color: #212121;
  line-height: 36rpx;
  margin-top: 45rpx;
}
 
.buyMian-slide-title {
  font-size: 36rpx;
  color: #ff7500;
  line-height: 38rpx;
  margin-top: 25rpx;
  text-align: center;
}
 
.buyMian-slide-slide {
  margin: 10rpx auto 0;
}
 
/* range */
 
.buyMian-slide-contain {
  width: 100%;
  display: flex;
  position: relative;
  /* left: -25rpx; */
  /* background: red; */
}
 
.buyMian-slide-range {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  color: #8a8a8a;
  justify-content: space-around;
}
.slider-left, .slider-right {
  /* margin-right: -8rpx; */
  margin: 0;
}
.showContentBox{
  width: 100%;
  margin: 0 auto;
  height: 36rpx;
  /* background: blue; */
  /* position: absolute; */
  top: 10rpx;
  position: relative;
  /* left: 8rpx; */
}
.show-max-content,.show-min-content{
  position: absolute;
  width: 40rpx;
  margin-left: -20rpx;
  display: flex;
  justify-content: center;
}
.show-max-content{
  margin-right: -20rpx !important;
}
.show-min-content text{
  position: absolute;
  font-size: 26rpx;
}
.show-max-content text{
  position: absolute;
  font-size: 26rpx;
}
.show-merge-content{
  position: absolute;
  width: 40%;
  display: flex;
  justify-content: center;
  margin-left: -20%;
}
.show-merge-content text{
  position: absolute;
  font-size: 26rpx;
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  display: flex;
  justify-content: center;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

这里是js

var util = require('../../../utils/util.js');
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    change: false, // 当两个slider在最右端重合时,将change设置为true,从而隐藏slider2,才能继续操作slider1
    change2: false, // 当两个slider在最左端重合时,将change2设置为true,从而隐藏slider1,才能继续操作slider2
    max: 24, // 两个slider所能达到的最大值
    min: 0, // 两个slider所能取的最小值
    rate: 24/100, // slider的最大最小值之差和100(或1000)之间的比率 即最大值-最小值/100
    slider1Max: 24, // slider1的最大取值
    slider1Value: 0, // slider1的值
    slider2Value: 1, // slider2的值
    slider2Min: 0, // slider2的最小取值
    slider1W: 0, // slider1的宽度
    slider2W: 100, // slider2的宽度
    showContent1: 0, //左边滑块离左边的距离
    showContent2: 100/24, //右边滑块离左边的距离
    zIndexFlag: 1, //控制层叠
    closeTo: 1,//靠近多少就合并数字 百分比
    closeToFlag: false,//true时 合并数字
    closeToPosition: 0,//合并数字的位置
  },
  onLoad: function (options) {
    let list = []
    for(let i=0;i<24;i++){
      list.push(i+'点-'+(i+1)+'点');
    }
    this.setData({
      list: list
    })
  
  },

  // 开始滑动
  changeStart: function (e) {
    var idx = parseInt(e.currentTarget.dataset.idx)
    if(this.data.slider1Value !== this.data.slider2Value){
      this.setData({
        change: false,
        change2: false
      })
    }
    if (idx === 1) {
      // dW是当前操作的slider所能占据的最大宽度百分数
      var dW = (this.data.slider2Value - this.data.min) / this.data.rate;
      this.setData({
        slider1W: dW,
        slider2W: 100 - dW,
        slider1Max: this.data.slider2Value,
        slider2Min: this.data.slider2Value,
        zIndexFlag: 1,
        change: false
      })
    } else if (idx === 2) {
      var dw = (this.data.max - this.data.slider1Value) / this.data.rate;
      this.setData({
        slider2W: dw,
        slider1W: 100 - dw,
        slider1Max: this.data.slider1Value,
        slider2Min: this.data.slider1Value,
        zIndexFlag: 2,
        change2: false
      })
    }
  },
  // 正在滑动
  changing: function (e) {
    var idx = parseInt(e.currentTarget.dataset.idx)
    var value = e.detail.value
    if (idx === 1) {
      this.setData({
        slider1Value: value,
        showContent1: 100 - ((this.data.max - this.data.slider1Value) / this.data.rate)
      })
    } else if (idx === 2) {
      this.setData({
        slider2Value: value,
        showContent2: 100 - ((this.data.max - this.data.slider2Value) / this.data.rate)
      })
    }
    // 当两个数字相近时 数字合并 太靠近两边会取一个足够显示的位置 15 85
    if(this.data.showContent2 - this.data.showContent1 < this.data.closeTo){
      let p = this.data.showContent1 + ((this.data.showContent2 - this.data.showContent1) / 2)
      if(p > 85){
        this.setData({
          closeToFlag: true,
          closeToPosition: 85
        })
      }else if(p < 15){
        this.setData({
          closeToFlag: true,
          closeToPosition: 15
        })
      }else{
        this.setData({
          closeToFlag: true,
          closeToPosition: p
        })
      }
    }else{
      this.setData({
        closeToFlag: false
      })
    }
  },
  changed: function (e) {
    let idx = parseInt(e.currentTarget.dataset.idx)
    if (idx === 1) {
      this.setData({
        showContent1: 100 - ((this.data.max - this.data.slider1Value) / this.data.rate)
      })
    } else if (idx === 2) {
      this.setData({
        showContent2: 100 - ((this.data.max - this.data.slider2Value) / this.data.rate)
      })
    }
    if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.max) {
      this.setData({
        change: true
      })
    }
    if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.min) {
      this.setData({
        change2: true
      })
    }
    this.drawCanvas();
  }
})

实现的核心思想在于两个slider的位置拼接,slider1显示的值永远是0,但是slider2展示出来的数据永远是最中心的值,看看change触发的变化就能懂。

在这里申明一下,灵感来自于:

https://blog.csdn.net/Hero_rong/article/details/101057530

然后参考了:

https://blog.csdn.net/weixin_45154833/article/details/104814508

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

仓鼠冒

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值