微信小程序双向slider

图片来源:视觉中国

产品需要一个双向可以调节的slider用来做微信小程序价格范围筛选,官方slider是单向的,这和iOS和安卓都是一样的,所以自定义了一个组件微信小程序双向slider

双向slider.gif

一个选择数值范围的slider,双向可以滑动,可以设置最大值,最小值,初始最小值,初始最大值,也可以设置滑块大小,具体使用如下:

先在要使用的地方的json文件中引入该组件

{
  "usingComponents": {
      "zy-slider": "../../component/zyslider"
  },
  "navigationBarTitleText": "zy-slider"
}

然后在wxml中使用

<view class="zy-slider">
    <zy-slider minValue="0" maxValue="100" min="0" max="100" bind:lowValueChange="lowValueChangeAction"
                bind:heighValueChange="heighValueChangeAction" />
</view>
参数说明:
min: Number/String slider 最小值
max: Number/String slider 最大值
minValue: Number/String slider 左边滑块初始位置
maxValue: Number/String slider 右边滑块初始位置
bind:lowValueChange : function 左边滑块回调 {lowValue:lowValue}
bind:heighValueChange : function  右边滑块回调 {heighValue:heighValue}
wxss:
.zy-slider {
    margin: 60rpx;
}

主要实现思路:

一、滑块滑动手势可以使用catchtouchmove方法捕获,但是拿到的是相对屏幕边框的px值,为了方便适配,我们需要转成rpx
1、在自定义组件的ready(组件生命周期函数,在组件布局完成后执行,此时可以获取节点信息)方法中获取屏幕宽度,取得与750rpx的比例值
const getSystemInfo = util.wxPromisify(wx.getSystemInfo)
util.wxPromisify(wx.getSystemInfo)()
      .then(res => {
        let ratio = res.windowWidth / 750
        that.setData({
          ratio: ratio,
        })
 })

util.wxPromisify()是官方函数的一个Promise封装函数,具体实现可以看demo源码。

2、获取当前slider视图的总宽度,此时获取的也是px值,加上比例值,转换成rpx单位
 var query = wx.createSelectorQuery().in(this)
 query.select(".container").boundingClientRect(function (res) {
        
 }).exec()
二、为了简单起见,左边滑块使用最右边作为计数点,右边滑块最左边作为计数点,使用三条线作为slider主体,分别为left,body,right
1、使用相对定位依次布局
2、在取到slider视图总宽度后,在给滑块设置初始位置,此时
  /**
    * 设置左边滑块的值
    */
    _propertyLeftValueChange: function () {

      let minValue = this.data.minValue / this.data.max * this.data.bigLength
      let min = this.data.min / this.data.max * this.data.bigLength
      this.setData({
        leftValue: minValue - min
      })
    },

    /**
     * 设置右边滑块的值
     */
    _propertyRightValueChange: function () {
      let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
      this.setData({
        rightValue: right
      })
    },

bigLength:slider总长度 = 视图总宽度 - 2 倍 滑块宽度

三、在滑动手势中重新给滑块设置位置

以左滑块为例:

   /**
     * 左边滑块滑动
     */
    _minMove: function (e) {

      let pagex = e.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2

      if (pagex + this.data.sliderLength >= this.data.rightValue) {
        pagex = this.data.rightValue - this.data.sliderLength
      } else if (pagex <= 0) {
        pagex = 0
      }

      this.setData({
        leftValue: pagex
      })

      let lowValue = parseInt(pagex / this.data.bigLength * parseInt(this.data.max) + this.data.min)
      var myEventDetail = { lowValue: lowValue }
      this.triggerEvent('lowValueChange', myEventDetail)
    },

tatio: 当前屏幕和750rpx之间的比例 containerLeft:当前slider视图距离屏幕左边距离 减去 1/2 的滑块的宽度是为了让滑块的位置和手指点的位置重合(我们的计数点事滑块边沿)

最终具体实现代码可以在GitHubzy-slider中查看。用来做微信小程序范围筛选还是不错的,可以直接拿Component中的代码到项目中使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏happyJared

IDEA快捷键拆解系列(六):Code篇

  以下是关于Code导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1492
来自专栏听雨堂

Android新手之旅(9) 自定义的折线图

  希望实现一个折线图,但没有找到合适的控件或者代码,只有一个基本样子的,在它的基础上,进行了一些改进,改得比较灵活,可以传递参数,可以设置位置,坐标轴长度,刻...

3446
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

3479
来自专栏angularejs学习篇

JQuery中的动画

  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用h...

843
来自专栏天天

DOM操作(20171027)

1083
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

3418
来自专栏HTML5学堂

jQuery中prop和attr的区别

HTML5学堂:本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop(),很多开发者在使用时,经常容易混淆,今天HTM...

3969
来自专栏极乐技术社区

『组件』大转盘、刮刮乐、老虎机……

组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 什么是组件: 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样...

6296
来自专栏js编程在工科课程中的简单应用

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1382
来自专栏老秦求学

百练 石头剪刀布

总时间限制: 1000ms内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小...

3647

扫码关注云+社区

领取腾讯云代金券