首页 > 小程序教程 > 微信小程序搜索定位城市页面功能制作设计教程

微信小程序搜索定位城市页面功能制作设计教程

上一篇 下一篇
今天给大家带来微信小程序搜索定位城市页面功能制作设计教程,主要适合城市搜索页面,区域定位,城市选择等页面,制作好以后效果图如下:


一、wxml页面代码如下:
<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>

二、样式wxss页面代码如下:
/**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;
}

三、js页面代码如下:
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
    })
    
  },



})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 25,082次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 响应式 自适应 微信公众平台 微信素材 微信图片 企业网站 单页式简历模板 微信文章 微信模板
您可能会喜欢的其他模板