阅读 257

微信小程序--根据首字母选择城市

前言

首先看一下项目截图

业务场景:项目中有时会遇到根据首字母选择城市,或者根据首字母选择通讯录姓名等等,那如果按照以前的思路需要用判断滚动条的位置,才能滑动到哪个地方。小程序官方有提供scroll-into-view属性,可以更快的解决这个场景。

小程序官方提供的属性描述。小程序文档

代码实现

wxml代码片段

	<scroll-view scroll-y scroll-into-view="{{intoview}}">
	    //右侧定位存在的首字母
	    <view class="searchLetter">
    		<view
    		 wx:for="{{provinceList}}"
    		 wx:for-index="key"
    		 wx:for-item="value"
    		 wx:key="index"
    		 data-id="{{key}}"
    		 bindtap="scrollToSelect"
    		>{{key}}
    		</view>
		</view>
	    <view class="selection" wx:for="{{provinceList}}" wx:key="key" id="{{key}}">
	        //省略遍历省份,数据结构最好是map格式,根据首字母遍历
	    </view>
	</scroll-view>
复制代码

注意

  1. scroll-view组件需要设置scroll-y竖向滚动。
  2. scroll-into-view的值就是选中的首字母,子元素需要设置属性id(键值就是首字母A、B、C等等)。
  3. scrollToSelect方法是用于点击字母,给scroll-into-view赋值。
  4. 这里踩过一个坑,scroll-view必须要设置固定高度,否则点击首字母无效。

效果图

有了scroll-into-view,实现首字母选择城市就变得很简单了,看下效果图吧。

关注下面的标签,发现更多相似文章
评论