<view class="container">
<view class="nav" bindtap="handleTapEvent">
<view class="home {{currentIndex==0?'active':''}}" data-index="0">国内</view>
<view class="abroad {{currentIndex==1?'active':''}}" data-index="1">国际/地区</view>
</view>
<view class="toolBar">
<scroll-view scroll-y="true">
<view wx:for="{{word}}" wx:for-index="idx" wx:key="id" bindtap="tap" id="{{item.id}}">{{item.message}}</view>
</scroll-view>
</view>
<view class="wrapCity">
<swiper current="{{currentIndex}}" duration="100" bindchange="handleChangeEvent">
<swiper-item>
<scroll-view scroll-y="true" >
<view class="wrap">
<view class="now">
<view>当前城市</view><image class="line" src="../../images/line.png"></image>
</view>
<view class="cities">
<button class="city" wx:for="{{array}}" wx:key="id">
{{item.message}}
</button>
</view>
<view class="hot">
<view>热门城市</view><image class="line" src="../../images/line.png"></image>
</view>
<view class="cities">
<button class="city" wx:for="{{arrayHot}}" wx:key="id">
{{item.message}}
</button>
</view>
</view>
<view class="cityList">
<view class="letterList" >A</view>
<view wx:for="{{aList}}" wx:key="id">{{item.message}}</view>
<view class="letterList">B</view>
<view wx:for="{{bList}}" wx:key="id">{{item.message}}</view>
<view class="letterList">C</view>
<view wx:for="{{bList}}" wx:key="id">{{item.message}}</view>
<view class="letterList">D</view>
<view wx:for="{{bList}}" wx:key="id">{{item.message}}</view>
<view class="letterList">E</view>
<view wx:for="{{bList}}" wx:key="id">{{item.message}}</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
333
</swiper-item>
</swiper>
</view>
</view>
|
/**selectCity.wxss**/
page {
height:100%;
font-size:32rpx;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
font-family:'微软雅黑';
}
.nav {
display:flex;
height:2.133rem;
border-bottom:1rpx solid #C7C7C9;
}
.nav view {
flex:1;
text-align: center;
height:2.107rem;
line-height: 2.107rem;
color:#4A586A;
}
.nav view.active{
color:#59A5F0;
border-bottom: 4rpx solid #59A5F0;
}
.wrapCity {
flex:1;
}
.wrapCity swiper{
height: 100%;
}
scroll-view {
display: box;
height:100%;
}
.wrap {
background:#F0EFF5;
padding:0 0 0 0.693rem;
font-size:28rpx;
color:#929FB1;
}
.wrap button {
background:#fff;
}
.wrap .now {
display:flex;
position:relative;
height:0.933rem;
padding-top:0.8rem;
}
.wrap .now image {
width:15.733rem;
height:0.64rem;
position:absolute;
top:55%;
right:0;
}
.wrap .hot {
display:flex;
position:relative;
height:0.933rem;
padding-top:0.8rem;
}
.wrap .hot image {
width:15.733rem;
height:0.64rem;
position:absolute;
top:55%;
right:0;
}
.wrap .cities {
display:flex;
flex-wrap:wrap;
margin-left:-0.267rem;
padding:0.667rem 0 0;
}
.wrap .cities .city {
width:5.333rem;
height:1.6rem;
line-height:1.6rem;
margin:0.267rem;
font-size:32rpx;
}
.cityList view {
display:flex;
flex-direction:column;
padding-left:1.067rem;
height:2.667rem;
line-height:2.667rem;
text-align:left;
border-bottom:2rpx solid #eee;
}
.cityList .letterList {
background:#F0EFF5;
margin-left:-0.267rem;
height:1.333rem;
line-height:1.333rem;
}
.toolBar {
position:fixed;
z-index:99;
right:0;
width:1.6rem;
height:100%;
background:rgba(255,255,255,0.5);
color:#59A5F0;
font-size:24rpx;
display:flex;
flex-direction:column;
}
.toolBar scroll-view {
height:100%;
display:box;
}
.toolBar scroll-view view {
text-align:center;
width:100%;
height:1.2rem;
}
.toolBar scroll-view view:first-child {
margin-top:0.267rem;
}
|
Page({
data:{
currentIndex:0,
array:[{
message:'上海',
},{
message:'北京'
}],
arrayHot:[{message:'上海' },{ message:'深圳'},{ message:'广州'},{message:'广州'},{message:'广州'},{message:'广州'},{message:'广州'
},{message:'广州'},{message:'深圳'},{message:'深圳'},{ message:'深圳'},{message:'深圳'},{message:'深圳'
},{message:'深圳'},{message:'深圳'}],
aList:[{message:'阿尔山'},{message:'阿里'},{message:'阿里'},{message:'阿里'},{message:'阿里'},{message:'阿里'}],
bList:[{message:'宝山'},{message:'宝山'},{message:'宝山'},{message:'宝山'},{message:'宝山'},{message:'宝山'},{message:'宝山'}],
word:[{
id:'A',
message:'当前'
},{
id:'B',
message:'热门'
},{
id:'C',
message:'A'
},{
id:'D',
message:'B'
},{
id:'E',
message:'C'
},{
message:'F'
},{
message:'G'
},{
message:'H'
},{
message:'I'
},{
message:'J'
},{
message:'K'
},{
message:'L'
},{
message:'M'
},{
message:'N'
},{
message:'O'
},{
message:'P'
},{
message:'Q'
},{
message:'R'
},{
message:'S'
},{
message:'T'
},{
message:'U'
},{
message:'V'
},{
message:'W'
},{
message:'X'
},{
message:'Y'
},{
message:'Z'
}],
},
handleTapEvent:function(ev){
// console.log(ev.target.dataset.index);
this.setData({
currentIndex:ev.target.dataset.index
})
},
handleChangeEvent:function(ev){
//打印时间对象知道， current 在事件对象里面
console.log(ev.detail.current);
this.setData({
currentIndex:ev.detail.current
})
},
})
|
模板简介：该模板名称为【微信小程序搜索定位城市页面功能制作设计教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
