微信小程序之简单双向调节的slider滑动选择器

微信小程序 专栏收录该内容
18 篇文章 1 订阅

简单说明一下,这是用微信官方的slider组件拼接的,没有用到其他框架哈。

(一)实现效果

实现效果

(二)实现过程

主要是将两个滑动选择器拼接在一起、各自设置所占长度比,就可以实现双向滚动调节了,但是有一个问题,我没有解决到,就是一个固定的滑动区域内,左右滑块可以相互交接互相滑动,尝试了一下没弄出来。
1、wxml代码:

<view class='sliderHCon'>
  <view class='showMoney'>
    <text class='MoneyValue'>{{leftValue}}</text>
    <text class='MoneyValue'>{{rightValue}}</text>
  </view>
  <view class='twoSlider'>
    <slider min='{{leftMin}}' max='{{leftMax}}' value='{{leftValue}}' activeColor='#cecacb' backgroundColor='#f26a36' block-size='20' step='100' style='width:{{leftWidth}}%;margin-right:0rpx;' bindchange="leftChange" />
    <slider min='{{rightMin}}' max='{{rightMax}}' value='{{rightValue}}' activeColor='#f26a36' backgroundColor='#cecacb' block-size='20' step='100' style='width:{{rightWidth}}%;margin-left:0rpx;' bindchange="rightChange" />
  </view>
</view>

2、wxss代码:

.sliderHCon {
  margin: 0 40rpx 0 40rpx;
  height: 250rpx;
  border: 1rpx solid red;
  width: 70%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.MoneyValue {
  font-size: 30rpx;
  text-align: center;
  color: #999;
  margin-top: 15rpx;
}

.showMoney text {
  margin-right: 30rpx;
}

.twoSlider {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

3、js代码:

  /**
   * 页面的初始数据
   */
  data: {
    leftMin: 0, //左边滑块最小值
    leftMax: 10000, //左边滑块最大值
    rightMin: 0, //右边滑块的最小值
    rightMax: 10000, //右边滑块最大值
    leftValue: 1000, //左边滑块默认值
    rightValue: 6000, //右边滑块默认值
    leftWidth: '50', //左边滑块可滑动长度:百分比
    rightWidth: '50', //右边滑块可滑动长度:百分比
  },

  // 左边滑块滑动的值
  leftChange: function(e) {
    console.log('左边改变的值为:' + e.detail.value);
    var that = this;
    that.setData({
      leftValue: e.detail.value //设置左边当前值
    })
  },
  // 右边滑块滑动的值
  rightChange: function(e) {
    console.log('右边改变的值为:' + e.detail.value);
    var that = this;
    that.setData({
      rightValue: e.detail.value,
    })
  },

如果想参考其他小程序框架做的,实现效果如下,可以参考这篇wepy写的介绍文章
wepy效果

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

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

打赏

纵倾童鞋

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

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

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

打赏作者

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

抵扣说明:

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

余额充值