自定义微信小程序组件：轻松选择城市

2023-10-29 17:06:09

在上一篇文章中，我们探讨了微信小程序自定义组件的语法。这篇文章将深入了解组件的实现逻辑，帮助你轻松构建自己的城市选择器组件。

布局设计

从实现效果来看，该组件可划分为三个部分：

二级列表，展示城市数据
侧边栏，用于滑动筛选
中间的提示框

因此，我们的布局将包括：

<scroll-view>
  <view>
    <text>提示框</text>
  </view>
</scroll-view>

实现逻辑

侧边栏

侧边栏负责展示城市首字母，并响应用户滑动事件。我们需要监听 touchstart 和 touchmove 事件，并根据手指移动的位置更新选中首字母和展示的城市列表。

// 监听手指按下的位置
touchstartHandler(e) {
  this.startX = e.touches[0].clientX;
  this.startY = e.touches[0].clientY;
}

// 监听手指移动时的位置
touchmoveHandler(e) {
  // 计算手指移动的距离
  const deltaX = e.touches[0].clientX - this.startX;
  const deltaY = e.touches[0].clientY - this.startY;
  
  // 根据手指移动的距离更新选中首字母
  this.updateSelectedLetter(deltaX, deltaY);
  
  // 根据选中首字母更新展示的城市列表
  this.updateCityList(this.selectedLetter);
}

展示城市列表

展示城市列表是滚动视图的一部分，它需要根据用户选择的首字母动态更新。

// 更新展示的城市列表
updateCityList(letter) {
  // 根据首字母筛选城市列表
  const cities = this.getCitiesByLetter(letter);
  
  // 更新数据绑定
  this.setData({
    cities: cities
  });
}

提示框

提示框用于在用户未滑动时显示提示信息。它是一个简单的文本组件，根据 selectedLetter 的变化动态更新。

// 根据选中的首字母更新提示框
updateHint(letter) {
  let hint = '请选择首字母';
  if (letter) {
    hint = `当前首字母：${letter}`;
  }
  
  this.setData({
    hint: hint
  });
}