微信小程序实现根据字母选择城市功能

前端之家收集整理的这篇文章主要介绍了微信小程序实现根据字母选择城市功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天开发一个小程序,里面涉及到区域选择,看了网上的一些版本,感觉写的不全,有可能是我的理解能力还不够吧。今天我就结合网上的答案,在根据自己的需求,重新整理一份。希望对大家有帮助。先看看截图:

下面我们把代码梳理一下。

一、创建index.wxml文件

在pages->index文件夹下,新建index.wxml文件代码如下:

确认 scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list"> wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> id="{{idx}}" class="list_tit">{{idx}} wx:for="{{cityName}}"> class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}

class="scroll_list"
bindtouchstart="chStart"
bindtouchend="chEnd"
catchtouchmove="chMove"
style="background: rgba(0,{{trans}});"

wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName">
wx:if="{{idx != '热门城市'}}">
id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}

hidden="{{hidden}}" class="showwords">
{{showwords}}

二、创建对应的CSS

在pages->index文件夹下,新建index.wxss文件代码如下:

显示框*/ .showwords { width: 80px; height: 80px; background: rgba(0,.3); border-radius:50%; line-height: 80px; text-align: center; font-size:10vw; margin: auto; position: absolute; top: 0;left: 0;bottom: 0;right: 0; z-index: 999; }

三、创建JS文件

在pages->index文件夹下,新建index.js文件代码如下:

offsettop && y < height) { // console.log((y-offsettop)/lineHeight) var num = parseInt((y - offsettop) / lineHeight); endWords = cityarr[num]; // 这里 把endWords 绑定到this 上,是为了手指离开事件获取值 that.endWords = endWords; }; //去除重复,为了防止每次移动都赋值,这里限制值有变化后才会有赋值操作, //DOTO 这里暂时还有问题,还是比较卡,待优化 if (isNum != num) { // console.log(isNum); isNum = num; that.setData({ showwords: that.endWords }) } },//选择城市,并让选中的值显示在文本框里 bindCity: function(e) { console.log(e); var cityName = e.currentTarget.dataset.city; this.setData({ cityName: cityName }) } })

四、创建城市文件

在utils文件夹里创建city.js文件,具体代码如下:

以上就是全部代码,大家可以再自己的项目中部署。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章