微信小程序自定义组件-城市选择

最新推荐文章于 2024-07-26 10:43:16 发布

RaoMeng1995

最新推荐文章于 2024-07-26 10:43:16 发布

阅读量3.9k

点赞数

分类专栏：微信小程序文章标签：微信小程序自定义组件

本文链接：https://blog.csdn.net/RaoMeng1995/article/details/81068969

版权

本文介绍了微信小程序中自定义组件的实现，聚焦于城市选择组件的逻辑。通过使用scroll-into-view属性实现侧边栏与二级列表的联动效果。文章详细阐述了计算手指触摸位置、设置事件监听以及数据源格式的要求，最后提供了项目的GitHub地址。

摘要由CSDN通过智能技术生成

上篇文章有介绍一些小程序的自定义组件语法，这篇文章就不多做赘述，重点介绍组件的实现逻辑。

先把效果图贴出来，看看要实现的效果：

城市选择效果图.gif

首先还是设置布局，从实现效果看，组件可分成三个部分：展示城市数据的二级列表、侧边的滑动栏以及中间的提示框。也就是一个scroll-view，一个view布局以及一个text。最终确定的wxml布局文件如下：

<scroll-view class='cityList' scroll-y scroll-into-view='{
  {currentIndex}}' scroll-top='{
  {scrollTop}}'>
     <view wx:for='{
  {allCities}}'>
          <view class='letter-class' id="id{
  {index}}">{
  {item.letter}}</view>
          <view class='item-class' wx:for='{
  {item.cityList}}' wx:for-item='cityItem' bindtap='citySelectEvent' data-city=&#