微信小程序实现根据字母选择城市功能
|
今天开发一个小程序，里面涉及到区域选择，看了网上的一些版本，感觉写的不全，有可能是我的理解能力还不够吧。今天我就结合网上的答案，在根据自己的需求，重新整理一份。希望对大家有帮助。先看看截图：
下面我们把代码梳理一下。 一、创建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"
hidden="{{hidden}}" class="showwords"> 二、创建对应的CSS在pages->index文件夹下，新建index.wxss文件，代码如下： 三、创建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文件，具体代码如下： 以上就是全部代码，大家可以再自己的项目中部署。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
