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

哈哈先上图看看是不是这种效果因为比较穷所以录制的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="{{index}}" >{{item}}</text></view></view><!-- 循环城市列表 end --></view>  </scroll-view></view><!-- 字母索引 start --><view class="search-nav"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"><text bindtap="cityScroll" data-index="{{index}}" wx:for="{{searchNav}}" wx:key="{{index}}">{{item}}</text></view><!-- 字母索引 end --></view>
</view>

wxss

/* pages/city/city.wxss */
.cityBox {padding: 0 5rpx;display: flex;justify-content:row;
}.search-city{width: 100%;height: 60rpx;position:absolute;top: 20rpx;display: flex;flex-direction: row;
}.content{margin-top: 90rpx;width: 100%;
}.city-scroll {left: 0;position: fixed;height: 100%;width: 720rpx;
}.search-nav{position: fixed;top: 120rpx;bottom: 5rpx;right: 5rpx;display:flex;flex-direction: column;justify-content: space-around;
}.search-nav text{text-align: center;font-size: 24rpx;
}.search-city input{height: 50rpx;line-height: 50rpx;border:1rpx solid #fff;border-radius: 10rpx;width: 80%;color: #000;font-size: 32rpx;
}.search-city button{margin-top: 3rpx;margin-right: 20rpx;border: none;color: #1296db;font-size: 32rpx;width: 20%;height: 50rpx;line-height: 50rpx;background-color: #ece5dc;
}.city{font-size: 24rpx;padding-bottom: 10rpx;border-bottom: 1rpx solid #fff;height:30rpx;line-height:30rpx;}.show-city{display: flex;flex-direction: column;justify-content: left;
}.show-city text{margin-top: 10rpx;margin-bottom: 10rpx;font-size: 28rpx;
}

// pages/city/city.js
// 引入城市列表项
let cityList = require('./json');Page({/*** 页面的初始数据*/data: {searchCtiy:'',searchValue:'',toView:'',//用来做定位联动cityList:[],searchNav:[]},//   获取输入的城市getCity:function(e){let searchValue = e.detail.value;this.setData({searchValue:searchValue})},// 传输要查找的城市chooseCity:function(){let cityName = this.data.searchValue;wx.reLaunch({url: '../index/index?cityName='+cityName,});console.log(this.data.searchValue)},//   获取城市的数据getCItyList(){let searchNav = this.data.searchNavfor(let i in cityList.cityList){searchNav.push(cityList.cityList[i].title)}this.setData({cityList:cityList.cityList,searchNav:searchNav})console.log(this.data.cityList)},// 获取城市名称以及数据索引selectcity(e){let title = e.currentTarget.dataset.title;wx.showToast({title: 'title:'+title,icon: 'none'})console.log(this.data.cityList)},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getCItyList();},// 点击英文字母进行跳转到相应位置cityScroll(e){let index = e.currentTarget.dataset.index;this.setData({toView:`city${index}`})console.log(index)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

城市列表的json格式

let city = [     {"title":"A","lists":["阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"]},{"title":"B","lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"]},{"title":"C","lists":["重庆","成都","长沙","长春","沧州","常德","昌都","长治","常州","巢湖","潮州","承德", "郴州","赤峰","池州","崇左","楚雄","滁州","朝阳"]},{"title":"D","lists":["大连","东莞","大理","丹东","大庆","大同","大兴安岭","德宏","德阳","德州","定西","迪庆","东营"]},{"title":"E","lists":["鄂尔多斯","恩施","鄂州"]},{"title":"F","lists":["福州","防城港","佛山","抚顺","抚州","阜新","阜阳"]},{"title":"G","lists":["广州","桂林","贵阳","甘南","赣州","甘孜","广安","广元","贵港","果洛"]},{"title":"H","lists":["杭州","哈尔滨","合肥","海口","呼和浩特","海北","海东","海南","海西","邯郸","汉中","鹤壁","河池","鹤岗","黑河","衡水","衡阳","河源","贺州","红河","淮安","淮北","怀化","淮南","黄冈","黄南","黄山","黄石","惠州","葫芦岛","呼伦贝尔","湖州","菏泽"]},{"title":"J","lists":["济南","佳木斯","吉安","江门","焦作","嘉兴","嘉峪关","揭阳","吉林","金昌","晋城","景德镇","荆门","荆州","金华","济宁","晋中","锦州","九江","酒泉"]},{"title":"K","lists":["昆明","开封"]},{"title":"L","lists":["兰州","拉萨","来宾","莱芜","廊坊","乐山","凉山","连云港","聊城","辽阳","辽源","丽江","临沧","临汾","临夏","临沂","林芝","丽水","六安","六盘水","柳州","陇南","龙岩","娄底","漯河","洛阳","泸州","吕梁"]},{"title":"M","lists":["马鞍山","茂名","眉山","梅州","绵阳","牡丹江"]},{"title":"N","lists":["南京","南昌","南宁","宁波","南充","南平","南通","南阳","那曲","内江", "宁德","怒江"]},{"title":"P","lists":["盘锦","攀枝花","平顶山","平凉","萍乡","莆田","濮阳"]},{"title":"Q","lists":["青岛","黔东南","黔南","黔西南","庆阳","清远","秦皇岛","钦州","齐齐哈尔","泉州","曲靖","衢州"]},{"title":"R","lists":["日喀则","日照"]},{"title":"S","lists":["上海","深圳","苏州","沈阳","石家庄","三门峡","三明","三亚","商洛","商丘","上饶","山南","汕头","汕尾","韶关","绍兴","邵阳","十堰","朔州","四平","绥化","遂宁","随州","宿迁","宿州"]},{"title":"T","lists":["天津","太原","泰安","泰州","台州","唐山","天水","铁岭","铜川","通化","通辽","铜陵","铜仁","台湾","W","武汉","乌鲁木齐","无锡","威海","潍坊","文山","温州","乌海","芜湖","乌兰察布","武威","梧州"]},{"title":"X","lists":["厦门","西安","西宁","襄樊","湘潭","湘西","咸宁","咸阳","孝感","邢台","新乡","信阳","新余","忻州","西双版纳","宣城","许昌","徐州","香港","锡林郭勒","兴安"]},{"title":"Y","lists":["银川","雅安","延安","延边","盐城","阳江","阳泉","扬州","烟台","宜宾","宜昌","宜春","营口","益阳","永州","岳阳","榆林","运城","云浮","玉树","玉溪","玉林"]},{"title":"Z","lists":["杂多县","赞皇县","枣强县","枣阳市","枣庄","泽库县","增城市","曾都区","泽普县","泽州县","札达县","扎赉特旗","扎兰屯市","扎鲁特旗","扎囊县","张北县","张店区","章贡区","张家港","张家界","张家口","漳平市","漳浦县","章丘市","樟树市","张湾区","彰武县","漳县","张掖","漳州","长子县","湛河区","湛江","站前区","沾益县","诏安县","召陵区","昭平县","肇庆","昭通","赵县","昭阳区","招远市","肇源县","肇州县","柞水县","柘城县","浙江","镇安县","振安区","镇巴县","正安县","正定县","正定新区","正蓝旗","正宁县","蒸湘区","正镶白旗","正阳县","郑州","镇海区","镇江","浈江区","镇康县","镇赉县","镇平县","振兴区","镇雄县","镇原县","志丹县","治多县","芝罘区","枝江市","芷江侗族自治县","织金县","中方县","中江县","钟楼区","中牟县","中宁县","中山","中山区","钟山区","钟山县","中卫","钟祥市","中阳县","中原区","周村区","周口","周宁县","舟曲县","舟山","周至县","庄河市","诸城市","珠海","珠晖区","诸暨市","驻马店","准格尔旗","涿鹿县","卓尼","涿州市","卓资县","珠山区","竹山县","竹溪县","株洲","株洲县","淄博","子长县","淄川区","自贡","秭归县","紫金县","自流井区","资溪县","资兴市","资阳"]}]
module.exports = {cityList:city
}

哈哈如有思路有误的地方，欢迎指正~

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

微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现 item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击 ...
微信小程序点击加音效
微信小程序点击加音效 1.首先微信小程序的开发文档里有这样一个方法wx.createInnerAudioContext() 2.封装方法 eggMusic(){const innerAudioCont ...
微信小程序点击icon实现分享功能
微信小程序点击icon实现功能分享功能 1.小程序分享功能实现方式 2.定义触发分享功能的icon按钮 3.onShareAppMessage实现分享本文是想点击一个icon触发实现分享功能 1.小 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
thinkphp三级分销小程序源码_山东谷道微信小程序商城源码带后台公众号平台三级分销系统...
山东谷道微信小程序商城源码带后台公众号平台三级分销系统那么微信二级分销系统与微信三级分销系统到底有什么区别和联系呢?为什么改了个数字地位就天差地别? 1.微信分销模式等级的区别用简洁的话来说,微 ...
微信小程序点击更改样式-点击获得下划线
微信小程序点击更改样式-点击获得下划线 <view class="container"> <scroll-view class='headerBox' scrol ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...

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

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

最新文章

热门文章