18 | 滑动选择器表单组件：如何基于wxs自定义一个竖向的slider？-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

18 | 滑动选择器表单组件：如何基于wxs自定义一个竖向的slider？

在微信小程序的开发过程中，表单组件是与用户交互的重要组成部分，而滑动选择器（Slider）作为一种直观易用的输入方式，常用于需要用户选择一定范围内的数值或比例的场景。然而，微信小程序官方提供的Slider组件默认是横向的，对于需要竖向滑动选择的应用场景，如音量调节、进度条展示等，就需要我们自定义实现。本章节将详细介绍如何基于微信小程序脚本语言（WXS）来创建一个自定义的竖向slider组件，以满足特定需求。

一、需求分析

在构建竖向slider之前，我们需要明确几个关键点：

滑动方向：实现从上到下的滑动效果。
值域范围：确定slider的最小值、最大值以及当前值。
步长控制：根据需要设置每次滑动的最小单位。
外观定制：包括滑块、滑道、指示器等元素的样式设计。
事件响应：处理滑动开始、进行中、结束等事件，更新当前值并触发相应逻辑。

二、技术选型与准备

WXS（WeiXin Script） 是微信小程序推出的一套脚本语言，运行在JavaScriptCore中，但比JavaScript在性能上有所优化，特别适合于执行小程序的渲染逻辑。在本案例中，我们将利用WXS来处理slider的滑动逻辑，以保持界面的流畅性。

此外，我们还需要准备基础的WXML、WXSS和JavaScript文件来构建组件的结构、样式和行为。

三、实现步骤

3.1 定义组件结构（WXML）

首先，我们需要在WXML中定义slider的基本结构，包括滑道（track）和滑块（thumb）。

<!-- components/vertical-slider/vertical-slider.wxml -->
<view class="slider-container">
  <view class="slider-track" style="height: {{height}}px;">
    <view class="slider-bar" style="height: {{barHeight}}px;"></view>
    <view class="slider-thumb" style="transform: translateY({{thumbTop}}px);"></view>
  </view>
</view>

这里，slider-track是滑道的容器，slider-bar用于表示已选择的部分（可选），slider-thumb是滑块本身。通过动态绑定样式，我们可以控制它们的大小和位置。

3.2 编写样式（WXSS）

接下来，在WXSS中设置组件的样式，确保滑道和滑块能够正确显示，并支持竖向滑动。

/* components/vertical-slider/vertical-slider.wxss */
.slider-container {
  width: 30px; /* 滑道宽度 */
  position: relative;
}
.slider-track {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 5px;
}
.slider-bar {
  width: 100%;
  background-color: #409EFF;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
}
.slider-thumb {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
}

3.3 编写逻辑处理（JS & WXS）

JS部分：主要用于处理组件的初始化、属性传递以及事件监听。

// components/vertical-slider/vertical-slider.js
Component({
  properties: {
    value: {
      type: Number,
      value: 0,
      observer: 'updateValue'
    },
    min: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 100
    },
    step: {
      type: Number,
      value: 1
    },
    height: {
      type: Number,
      value: 200
    }
  },
  methods: {
    // 更新滑块位置
    updateValue(newVal) {
      // 计算滑块顶部位置
      const thumbTop = (newVal - this.properties.min) / (this.properties.max - this.properties.min) * this.properties.height;
      this.setData({
        thumbTop: thumbTop - 10, // 假设滑块高度为20px，居中显示
        barHeight: newVal === this.properties.max ? this.properties.height : thumbTop // 可选：显示已选择区域
      });
    },
    // 滑动逻辑应由WXS处理，这里只展示JS部分如何初始化
    onReady() {
      // 初始化时调用WXS函数设置初始状态
    }
  }
});

WXS部分：由于微信小程序的触摸事件处理较为复杂，且为保持性能，我们通常在JS中监听触摸事件，但可以使用WXS来辅助计算滑块位置。不过，为简化示例，这里假设我们直接在JS中处理滑动逻辑，而WXS可能用于其他复杂计算或渲染优化。

注意：实际上，由于WXS主要用于数据渲染，并不直接处理用户交互事件，因此滑动逻辑（如计算滑动距离、更新值等）通常需要在JS中处理。不过，你可以利用WXS进行高效的数据处理和格式化，减少JS与视图层之间的通信成本。

3.4 滑动事件处理

在微信小程序中，滑动事件通常通过监听touchstart、touchmove、touchend事件来实现。你可以在JS中设置这些事件的监听器，并在事件处理函数中计算滑块的移动距离，进而更新其位置和当前值。

由于篇幅限制，这里不展开具体的事件处理代码，但基本思路是：

在touchstart中记录起始触摸点的Y坐标。
在touchmove中计算当前触摸点与起始点的Y坐标差，据此更新滑块位置。
在touchend中确认最终位置，并触发相应的值更新逻辑。

四、总结

通过上述步骤，我们成功构建了一个基于微信小程序自定义的竖向slider组件。该组件通过WXML定义结构，WXSS定义样式，JS和（潜在的）WXS处理逻辑，实现了从上到下的滑动选择功能。在实际开发中，你可能需要根据具体需求调整样式、增加动画效果或优化性能，但基本思路和方法是相通的。希望本章节的内容能为你的微信小程序开发之路提供有力支持。