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

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

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

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

#### 一、需求分析

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

#### 二、技术选型与准备

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

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

#### 三、实现步骤

##### 3.1 定义组件结构（WXML）

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

```xml

<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中设置组件的样式，确保滑道和滑块能够正确显示，并支持竖向滑动。

```css
/* 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部分**：主要用于处理组件的初始化、属性传递以及事件监听。

```javascript
// 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处理逻辑，实现了从上到下的滑动选择功能。在实际开发中，你可能需要根据具体需求调整样式、增加动画效果或优化性能，但基本思路和方法是相通的。希望本章节的内容能为你的微信小程序开发之路提供有力支持。

该分类下的相关小册推荐：

微信小程序全栈开发实战(下)

微信小程序与云开发(上)

微信小程序全栈开发实战(中)

微信小程序与云开发(下)

微信小程序底层框架实现原理

微信小程序与云开发(中)