您的位置：首页 > 移动开发 > 微信开发

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

2017-07-28 00:00 627 查看

摘要:今天开发一个小程序，里面涉及到区域选择

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

项目截图
下面我们把代码梳理一下。

一、创建index.wxml文件

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

class="title">

class="title_list"value="{{cityName}}"placeholder="城市名称"/>

确认

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,0,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文件，代码如下：

/**index.wxss**/

.title{

position:relative;

padding:10px0;

}

.title_list{

display:inline-block;

padding:015px;

height:20px;

line-height:20px;

font-size:16px;

}

.titlebutton{

width:50px;

height:30px;

font-size:16px;

padding:0;

line-height:30px;

margin:auto;

position:absolute;

top:0;

bottom:0;

right:10px;

background:none;

}

.titlebutton::after{

border:none;

}

.title_list:nth-child(1){

border-right:1px#cccsolid;

}

/*城市列表*/

.city_list{

position:relative;

}

/*城市选择头部*/

.list_tit{

display:block;

line-height:40px;

height:40px;

padding-left:15px;

font-size:16ppx;

background:#f5f5f5;

color:#666;

}

.list_con{

height:40px;

/*border-top:1px#f5f5f5solid;*/

line-height:40px;

font-size:16px;

padding-left:15px;

}

.list_con::before{

content:"";

height:1px;

border-top:1px#f5f5f5solid;

position:absolute;

width:100%;

}

.list_con::before:nth-child(1){

border:none;

}

/*城市选择右边*/

.scroll_list{

background:rgba(0,0,0,0);

position:absolute;

height:calc(100%-100px);

width:25px;

top:90px;

right:10px;

}

.scroll_list_chi{

/*border:1pxbluesolid;*/

text-align:center;

font-size:12px;

}

/*显示框*/

.showwords{

width:80px;

height:80px;

background:rgba(0,0,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文件，代码如下：

//先引用城市数据文件

varcity=require('../../utils/city.js')

varlineHeight=0;

varendWords="";

varisNum;

Page({

data:{

"hidden":true,

cityName:"",//获取选中的城市名

},

onLoad:function(options){

//生命周期函数--监听页面加载

},

onReady:function(){

//生命周期函数--监听页面初次渲染完成

varcityChild=city.City[0];

varthat=this;

wx.getSystemInfo({

success:function(res){

lineHeight=(res.windowHeight-100)/22;

console.log(res.windowHeight-100)

that.setData({

city:cityChild,

winHeight:res.windowHeight-40,

lineHeight:lineHeight

})

}

})

},

onShow:function(){

//生命周期函数--监听页面显示

},

onHide:function(){

//生命周期函数--监听页面隐藏

},

onUnload:function(){

//生命周期函数--监听页面卸载

},

//触发全部开始选择

chStart:function(){

this.setData({

trans:".3",

hidden:false

})

},

//触发结束选择

chEnd:function(){

this.setData({

trans:"0",

hidden:true,

scrollTopId:this.endWords

})

},

//获取文字信息

getWords:function(e){

varid=e.target.id;

this.endWords=id;

isNum=id;

this.setData({

showwords:this.endWords

})

},

//设置文字信息

setWords:function(e){

varid=e.target.id;

this.setData({

scrollTopId:id

})

},

//滑动选择城市

chMove:function(e){

vary=e.touches[0].clientY;

varoffsettop=e.currentTarget.offsetTop;

varheight=0;

varthat=this;

;

varcityarr=["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z"]

//获取y轴最大值

wx.getSystemInfo({

success:function(res){

height=res.windowHeight-10;

}

});

//判断选择区域,只有在选择区才会生效

if(y>offsettop&&y<height){

//console.log((y-offsettop)/lineHeight)

varnum=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);

varcityName=e.currentTarget.dataset.city;

this.setData({cityName:cityName})

}

})

四、创建城市文件

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

varcity={

"City":[

{

"热门城市":[

{

"name":"北京",

"key":"热门"

},

{

"name":"上海",

"key":"热门"

},

{

"name":"广州",

"key":"热门"

},

{

"name":"深圳",

"key":"热门"

},

{

"name":"成都",

"key":"热门"

},

{

"name":"重庆",

"key":"热门"

},

{

"name":"天津",

"key":"热门"

},

{

"name":"杭州",

"key":"热门"

},

{

"name":"南京",

"key":"热门"

},

{

"name":"苏州",

"key":"热门"

},

{

"name":"武汉",

"key":"热门"

},

{

"name":"西安",

"key":"热门"

}

],

"A":[

{

"name":"阿坝",

"key":"A"

},

{

"name":"阿拉善",

"key":"A"

},

{

"name":"阿里",

"key":"A"

},

{

"name":"安康",

"key":"A"

},

{

"name":"安庆",

"key":"A"

},

{

"name":"鞍山",

"key":"A"

}

,

{

"name":"安顺",

"key":"A"

}

,

{

"name":"安阳",

"key":"A"

}

,

{

"name":"澳门",

"key":"A"

}

],

"B":[

{

"name":"北京",

"key":"B"

},

{

"name":"白银",

"key":"B"

},

{

"name":"保定",

"key":"B"

},

{

"name":"宝鸡",

"key":"B"

},

{

"name":"保山",

"key":"B"

},

{

"name":"包头",

"key":"B"

},

{

"name":"巴中",

"key":"B"

}

,

{

"name":"北海",

"key":"B"

}

,

{

"name":"蚌埠",

"key":"B"

}

,

{

"name":"本溪",

"key":"B"

}

,

{

"name":"毕节",

"key":"B"

}

,

{

"name":"滨州",

"key":"B"

}

,

{

"name":"百色",

"key":"B"

}

,

{

"name":"亳州",

"key":"B"

}

],

"C":[

{

"name":"重庆",

"key":"C"

},

{

"name":"成都",

"key":"C"

},

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 小程序小程序开发微信小程序开发

相关文章推荐

新的分享

章节导航