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

最新推荐文章于 2024-05-08 00:15:00 发布
最新推荐文章于 2024-05-08 00:15:00 发布
阅读量2k 收藏
点赞数
分类专栏： 微信小程序 备忘录 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43447037/article/details/108820903
版权

这里是改良的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
    评论
专栏目录
小程序slider实现双向滑动（价格区间选择）
zhanjinfeng的博客
09-05 8627
本人最近在写一个关于民宿的小程序，有个需求是，用户可以选择价格区间进行房屋的搜索，首先想到的是可以用微信小程序自己的组件slider滑块来实现，但是slider只支持单向滑动，上网查询大量资料发现还没有人实现小程序支持的双向滑动，于是便自己瞎捉摸了一下。将2个slider的position设置为absolute，看起来就像是一个slider，实际上则为2个。好了不废话了，上图上代码！ w...
微信小程序-双滑块组件
yinge0508的博客
11-15 840
微信小程序-双滑块组件
一个可双向滑块选择器的微信小程序组件double-sided-slider-master.zip
09-25
一个可双向滑块选择器的微信小程序组件double-sided-slider-master.zip
智能小程序 Ray 开发——表单组件 Slider、Switch 和 Textarea 实操讲解
最新发布
IoT砖家
05-08 1148
滑动选择器。
微信小程序双向slider
weixin_45154833的博客
03-12 1824
微信小程序双向slider 最近因为项目要求，需要在微信小程序写一个双向slider，但是看到微信小程序是没有提供这个组件，只有单向slider的，所以自己写了一个。 本着面向搜索引擎编程的思想(开玩笑啦，别让领导看到哈哈哈)，我在上看到很多大神的实现方式，大多数用catchtouchmove的去做，但是太麻烦了。还有说用ui框架的，但是如果什么都用别人的轮子，我们的编程思维会慢慢变迟钝的，直到看...
双向滚动slider
04-04
源码twoSlider，这是一个非常不错的双向滚动slider案例，希望大家能够喜欢。 双向滚动slider [list=a] #import "WLRangeSlider.h" (void)viewDidLoad { [super viewDidLoad]; _rangeSlider = [[WLRangeSlider alloc] initWithFrame:CGRectMake(0, 100, 320, 10)]; [_rangeSlider addTarget:self action:@selector(valueChanged:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:_rangeSlider]; } The Key Point is in "WLRangeSlider.m" in the methord - (void)initLayers { //z这里更改时间轴---24为24个小时 _maxValue = 24.0; _minValue = 0.0; _leftValue = 0; _rightValue = 6.5; _leftValue1=21.0; _rightValue1=24; } next step we initUI then change value in the methord of UIcontrol (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event (void)cancelTrackingWithEvent:(UIEvent *)event 测试环境：Xcode 6.2，iOS 6.0 以上
微信小程序自定义slider组件实现双向滑块
Axiaoheng_的博客
08-12 1420
微信小程序自定义slider组件实现双向滑块
微信小程序双向滑动slider（区间选择器）.zip
09-30
微信小程序的双向滑动slider，也称为区间选择器，是一种常见的用户交互组件，常用于价格范围、评分等需要用户在两个数值之间进行选择的场景。本文将深入探讨如何在微信小程序中实现这样的功能。 首先，我们需要了解...
小程序双向滑动组件双向slider滑动微信小程序组件slider组件
12-19
在微信小程序开发中，`slider`组件是一种常用的交互元素，尤其适用于实现双向滑动功能。在标题和描述中提到的“小程序双向滑动组件”即指的是这个组件，它允许用户通过左右滑动来选择不同选项或者浏览内容。下面将...
微信小程序-交互操作控件.zip
04-20
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务和丰富的交互体验。在这个“微信小程序-交互操作控件.zip”压缩包中，包含的是一套与微信小程序交互操作相关的代码...
微信小程序slider组件使用详解
12-29
本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下 效果图 WXML <view class=tui-content> <view class=tui-slider-head>设置step,当前设置步伐为5,当前值：{{slider1}} ...
双滑块Slider.zip
09-23
双滑块Slider.zip,双滑块Slider
小程序双头slider选择器的实现示例
10-15
主要介绍了小程序双头slider选择器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js实现左右双向选择器
10-10
js非常简单的实现了左右双向选择器，非常简单，拿过去就能用，希望能帮助到你
【微信小程序开发】实现带刻度尺滑块
08-13
【微信小程序开发】实现带刻度尺滑块，说明教程 http://www.xiaochengxupro.com/news/759.html
【微信原生小程序】手写双向slider滑块
weixin_43951592的博客
04-04 2045
官方自带的以及vant weapp组件都是只有单向的slider双向的slider，网上抄了几篇文章，代码量巨大而且还有各种bug，相当难用，chatGPT写的也没法用，没办法，只能自己手写一个了。
QSlider封装从中间向两边滑动
Pailugou的博客
05-15 691
#include <QPainter> #include <QtWidgets/QSlider> #include <QMouseEvent> #include <QPen> #include <QBrush> class TouchPanelSlider : public QSlider { Q_OBJECT public: explicit TouchPanelSlider(QWidget *parent = Q_NULLPTR...
微信小程序 slider双向滑动渐变色
Young_yaru的博客
05-17 1703
微信小程序 slider双向滑动渐变色 要求： 两个slider组件，第一个slider组件的选择区域为渐变色，未选择区域为灰色；第二个slider组件的选择区域为灰色，未选择区域为渐变色。无论滑动哪一个slider组件，slider的数据是一样的。 效果图 wxml <view class="" wx:elif="{{index==1}}"> <view class="body-view3"> <view cl
微信小程序双向滑动slider
hangGe0111的博客
11-07 2728
1.使用场景，通过滑动滑块，获取价格的范围，提交表单获取搜索结果。slider是单向的，这种范围获取的可能不行（当时的想法），还有一种思路，就是通过touch事件，使用view进行布局，手写一个（这种当然可以）。然后再网上找了一些资料，发现有人也有相同的需求，而且有案例，然后就做了伸手党，并且把找到的资料做了一下整理，方便后续参考使用，如有侵权，请联系博主删除。 2.代码 2.1wxml ...
微信小程序双向slider加背景图展示
05-12
可以使用微信小程序的 `slider` 组件和 `image` 组件来实现双向 slider 加背景图展示的效果。 首先，需要在 `wxml` 文件中添加 `slider` 和 `image` 组件，代码如下： ```html <view class="container"> <image class="background" src="{{backgroundUrl}}"></image> <slider class="slider" value="{{value1}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider> <slider class="slider" value="{{value2}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider> </view> ``` 其中 `background` 类设置背景图的样式，`slider` 类设置 slider 的样式。 然后，在 `js` 文件中定义 `data`，并在 `onLoad` 函数中设置背景图： ```javascript Page({ data: { backgroundUrl: '/images/background.jpg', value1: 20, value2: 80, min: 0, max: 100, }, onLoad: function () { wx.getImageInfo({ src: this.data.backgroundUrl, success: (res) => { this.setData({ backgroundWidth: res.width, backgroundHeight: res.height, }) }, }) }, onChange: function (event) { const { value } = event.detail const { dataset } = event.currentTarget const { index } = dataset if (index === '1') { this.setData({ value1: value, }) } else { this.setData({ value2: value, }) } }, }) ``` 在 `onChange` 函数中，通过 `dataset` 获取 slider 的索引，然后根据索引更新对应的 `value`。 最后，在 `wxss` 文件中设置样式： ```css .container { position: relative; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .slider { position: absolute; width: 80%; left: 10%; z-index: 1; } ``` 其中，`background` 样式设置背景图的样式，`slider` 样式设置 slider 的样式，并通过 `z-index` 属性设置层级关系，保证 slider 在背景图上方。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值