<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 }) }, }) |
模板简介:该模板名称为【微信小程序搜索定位城市页面功能制作设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。