小程序自定义组件实现城市选择功能

上一篇文章介绍了一些小程序的自定义组件语法，所以本文就不赘述了，重点介绍组件的实现逻辑。

首先粘贴效果图，查看要达到的效果：

城市选择效果图。可交换的图像格式

首先，布局已定。从实现效果来看，组件可以分为三个部分：展示城市数据的二级列表、侧面的滑动条和中间的提示框。即滚动视图、视图布局和文本。最终的wxml布局文件如下：

scroll-view class=' city list ' scroll-y scroll-in-view=' { { CurrentDex } } ' scroll-top=' { { scrollTop } } ' view wx : for=' { { all Cities } } ' view class=' letter-class ' id=' id { { index } } ' { { item . letter } }/view class=' item-class ' wx : for=' { { item . city list } } ' wx : for-item=' city item ' bind布局文件left : { { letterleft } } px“{ lettertext } }/text，我们需要考虑如何实现侧边栏和二级列表的联动效果。这里我使用了scroll-view的scroll-to-view属性，可以让scroll-view滑动到id对应的视图位置，满足了我们的需求。

滚动到视图属性。巴布亚新几内亚

这里，我们为列表的第一级布局视图设置id，并为滚动视图设置滚动到视图属性

滚动视图类=' cityList滚动视图=' { { currentIndex } } '滚动顶部='{{scrollTop}} '。//Id不能以数字开头。view class=' letter-class ' id=' id { { index } } ' { { item。letter}}/view然后在. js中的数据中将currentIndex初始化为“id0”。

/* * *组件的初始数据*/data : { currentindex : ' id0 ' }现在的问题是如何计算出手指在侧边栏上触到了哪个字母，然后改变current defx的值，使scroll-view滑动到指定的位置，达到联动的效果。

让我们谈谈下面的想法

首先，确认侧边栏的高度。我使用屏幕高度减去80px作为边栏的高度，并在。wxss文件。citySlide { display: flexflex-direction:柱；宽度： 60 rpx；height : calc(100%-80px)；绝对位置：top: 40pxright: 16rpxalign-items:居中；justice-content : center；背景色： # CCC；opacity: 0.6}然后通过从中的屏幕高度减去80px来计算侧边栏的具体高度。js。然后除以数据源主数据数组的长度，计算出每个字母的高度。

wx . getsysteminfo({ success : function(RES){ letterline height=(RES . window height-80)/that . data . all cities . length；that . setdata({ lettertop : RES . window height/2-30，letterleft : RES . window width/2-30 })；}})在计算出每个字母的高度后，我们可以通过侧边栏中触摸监控事件中被触摸点的坐标位置，计算出当前被触摸字母的序号索引，然后将currentIndex的值动态修改为(' id' index)。可以达到联动的效果。

屏幕中央显示的提示框的实现比较简单，通过一个变量isLetterHidden控制文本的显示和隐藏就可以轻松实现。

slideStart:函数(e) { //手指触摸的y坐标值var Touchy=e . Touchs[0].clientY//布局距离屏幕顶端距离var偏移量top=e . CurrentTarget。偏移顶部；var index=parsent((Touchy-offsetTop)/LetterLineHeight)；这个。setdata({ CurrentEx : ' id ' index，isLetterHidden: false，letterText : this。数据。所有城市[指数].字母});}，slideMove:函数{ var Touchy=e . Touchs[0].clientYvar偏移量top=e . CurrentTarget。偏移顶部；var index=parsent((Touchy-offsetTop)/LetterLineHeight)；这个。setdata({ CurrentEx : ' id ' index，isLetterHidden: false，letterText : this。数据。所有城市[指数].字母});}，slideEnd:函数{ var那=this wx : setTimeout(function(){ that。setdata({ isletr hidden : true })；}, 200);}这里有一点要注意，设置侧边栏触摸事件的时候，要选择catchtouchxxxx事件，不能使用bindtouchxxxx，因为约束事件不会阻止事件冒泡，这样手指在侧边栏滑动时，会影响到下方的列表的滑动，而捕捉事件阻止了事件冒泡，就不会出现滑动影响的问题。

再说下城市的数据源格式要求，要求是一个二维数组，然后子项要有名字和键两个字段，分别代表城市名和类别信件。

数据源格式。巴布亚新几内亚

项目开源代码库地址：TemplateOfHotel

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。