微信小程序点击--实现带字母索引的城市列表

最新推荐文章于 2020-12-12 14:42:20 发布

原创

最新推荐文章于 2020-12-12 14:42:20 发布 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

哈哈先上图看看是不是这种效果因为比较穷所以录制的gif格式图片有水印

字母索引城市列表

之前在网上搜索了好多这种格式的，感觉代码都好多如果只是点击然后跳转到相应的位置是比较简单的

主要用到的知识就是 scroll-view标签其中用到的属性就是

1.scroll-y：设置它的滑动为纵向滑动

2.scroll-with-animation：滑动的动画

3.scroll-into-view：通过id滑动到相应的位置

我的思路就是先设置每个城市标题的下边为city+下边索引值由于字母索引中的字母和每个城市标题是一样的所以它们的下标值也是一样的，在字母索引中设置一个点击方法，同时把下标传值过去，点击对应的字母的时候，给scroll-into-view赋值id即可实现效果

代码如下：

wxml

<!--pages/city/city.wxml-->
<view class="cityBox">
    <view class="search-city">
        <input placeholder="请输入城市名称中文" value="{
  
  {searchValue}}" bindinput="getCity" auto-focus />
        <button plain="true" bindtap="chooseCity">确定</button>
    </view>
    <view class="content">
        <view class="all-city">
            <view class="city">全国</view>
            <scroll-view class="city-scroll" scroll-y="true" scroll-with-animation="true" scroll-into-view="{
  
  {toView}}">
                <view class="city-list">
                    <!-- 循环城市列表 start -->
                    <view  wx:for="{
  
  {cityList}}" wx:key="{
  
  {index}}" id="{
  
  {'city'+index}}" bindtap='selectcity' data-title="{
  
  {item.title}}">
                        <view class="nav-text"> 
                            <text>{
  
  {item.title}}</text>
                        </view>               
                        <view class="show-city">
                            <text wx:for="{
  
  {item.lists}}" wx:key="{
  
  {in