微信小程序学习用精品:航空订票;

点评:界面设计参考:本区demo仅供学习研究之用,版权归原作者所有,禁止商用;
微信小程序学习用精品:航空订票; 微信小程序学习用精品:航空订票; 微信小程序学习用精品:航空订票; 微信小程序学习用精品:航空订票;

代码展示:

[JavaScript]
Page({   data: {     currentIndex:1,     startCity:'上海',     endCity:'北京',     hotelCity:'上海',     adultNum: 1,     childNum: 1,     rotate: -180   },   onLoad: function(){     console.log('页面加载成功');   },   onReady: function(){     this.animation = wx.createAnimation({       timingFunction: "ease",       duration: 400     })   },    minusAdultNum: function(){//减少成人的数量     if(this.data.adultNum > 0){       this.data.adultNum--;       this.setData({         adultNum: this.data.adultNum       })     }   },   plusAdultNum: function(){//增加成人的数量     this.data.adultNum++     this.setData({       adultNum: this.data.adultNum     })   },    minusChildNum: function(){//减少儿童的数量     if(this.data.childNum > 0){       this.data.childNum--;       this.setData({         childNum: this.data.childNum       })     }   },   plusChildNum: function(){//增加儿童的数量     this.data.childNum++     this.setData({       childNum: this.data.childNum     })   },    rotate_img: function() {//旋转飞机图片     this.animation.rotateZ(this.data.rotate).step()     this.setData({       rotate: -1*this.data.rotate,       startCity: this.data.endCity,       endCity: this.data.startCity,       animation: this.animation.export()     })   },   changeBtn: function(ev) {//单程,往返切换     this.setData({       currentIndex: ev.target.dataset.index     })   },    seatchProduct: function(){     wx.navigateTo({       url:'../productDetail/productDetail'     })   },      selectCity:function(){//选择城市     console.log('跳转城市选择页面');     wx.navigateTo({       url: '../selectcity/selectcity'     })   }  }) 

[JavaScript]
<!--ticketBooking.wxml--> <view class="container"> <!--白色背景区域-->   <view class="wrap">   <!--按钮切换-->     <view class="btn" bindtap="changeBtn">       <view class="{{currentIndex==0?'active':''}}" data-index="0">单程</view>      <view class="{{currentIndex==1?'active':''}}" data-index="1">往返</view>     </view>      <!--城市选择-->     <view class="chooseCity pd-70">     <view class="citySelect">      <view class="startCity" bindtap="selectCity">{{startCity}}</view>      <view class="citySelect_img">           <view bindtap="rotate_img" animation="{{animation}}">             <image class="changeCity_bg" src="../../images/changeCity_bg.png"></image>           </view>       <image class="samll_plane" src="../../images/samll_plane.png"></image>      </view>      <view class="endCity" bindtap="selectCity">{{endCity}}</view>     </view>        <view class="chooseDate">         <block>           <picker mode="date">             <view class="startDate">               <text class="date">9月8日</text>               <text class="week">周二出发</text>             </view>           </picker>         </block>         <block wx:if="{{currentIndex==1}}">           <picker mode="date">             <view class="endDate">               <text class="date">9月11日</text>               <text class="week">周五返回</text>             </view>           </picker>         </block>       </view>     </view>      <view class="title">酒店</view>      <view class="chooseCity pd-70 pdt-0">     <view class="citySelect">      <view class="hotelCity" bindtap="selectCity">{{hotelCity}}</view>     </view>        <view class="chooseDate">         <block>           <picker mode="date">             <view class="startDate">               <text class="date">9月8日</text>               <text class="week">周二出发</text>             </view>           </picker>         </block>         <block>           <picker mode="date">             <view class="endDate">               <text class="date">9月11日</text>               <text class="week">周五返回</text>             </view>           </picker>         </block>       </view>     </view>      <view class="title">人数</view>      <view class="person">       <view class="personNum">         <view class="text">成人</view>         <view class="outer">           <view class="minus" bindtap="minusAdultNum">—</view>           <view class="num">{{adultNum}}</view>           <view class="plus" bindtap="plusAdultNum">+</view>         </view>       </view>        <view class="personNum ml-30">         <view class="text">儿童</view>         <view class="outer">           <view class="minus" bindtap="minusChildNum">—</view>           <view class="num">{{childNum}}</view>           <view class="plus" bindtap="plusChildNum">+</view>         </view>       </view>       <view class="tishi">         <image src="../../images/tishi.png" class="tsimg"></image>       </view>      </view>      <button class="sureBtn" bindtap="seatchProduct">确定</button>   </view> </view> 

[CSS]
.container {   height: 100vh; }  .pd-70 {   padding: 0 1.867rem; }  .wrap {   display: flex;   flex-direction: column;   justify-content: flex-start; }  .btn {   width: 100%;   display: flex;   flex-direction: row;   font-size: 32rpx;   justify-content: center;   border-bottom: 2rpx solid #cececf; }  .btn view {   width: 40%;   height: 2rem;   line-height: 2rem;   text-align: center;   color: #000;   font-weight: 500; }  .btn view.active {   color: #59A5F0;   border-bottom: 7rpx solid #59A5F0; }  .chooseCity {   box-sizing: border-box;   padding-top: 0.96rem;   background-color: #fff;   border-bottom: 2rpx solid #cececf;   overflow: hidden; }  .pdt-0 {   padding-top: 0; }  .chooseCity .citySelect {   display: flex;   flex-direction: row;   justify-content: space-between;   height: 2.667rem;   line-height: 2.667rem;   font-size: 42rpx; }  .chooseCity .citySelect .hotelCity {   width: 100%;   border-bottom: 1rpx solid #F0EFF5;   color: #4A586A; }  .chooseCity .citySelect .startCity {   width: 6.187rem;   border-bottom: 1rpx solid #F0EFF5;   color: #4A586A; }  .chooseCity .citySelect .citySelect_img {   width: 2.693rem;   height: 2.587rem;   position: relative;   margin-top: 0.533rem; }  .chooseCity .citySelect .citySelect_img view {   position: absolute;   z-index: 99;   left: 0;   right: 0;   top: 0;   bottom: 0;   margin: auto; }  .chooseCity .citySelect .citySelect_img view .changeCity_bg {   width: 2.693rem;   height: 2.693rem; }  .chooseCity .citySelect .citySelect_img .samll_plane {   width: 1.653rem;   height: 1.12rem;   position: absolute;   top: 54%;   left: 54%;   transform: translate(-50%, -50%); }  .chooseCity .citySelect .endCity {   width: 6.187rem;   border-bottom: 1rpx solid #F0EFF5;   text-align: right;   color: #4A586A; }  .chooseDate {   display: flex;   width: 100%;   justify-content: space-between;   height: 2.4rem;   line-height: 2.4rem; }  .date {   font-size: 30rpx;   margin-right: 1.067rem; }  .week {   color: #929fb1;   font-size: 26rpx; }  .title {   color: #888;   width: 100%;   height: 2.13rem;   line-height: 2.13rem;   padding: 0 1rem;   border-bottom: 2rpx solid #cececf;   font-size: 30rpx; }  .person {   display: flex;   justify-content: space-between;   background-color: #fff;   height: 1.813333rem;   line-height: 1.813333rem;   padding: 0.8rem 0.533333rem;   border-bottom: 2rpx solid #cececf; }  .outer {   display: flex;   flex: 1;   flex-direction: row;   justify-content: center;   border: 3rpx solid #a9b1bb;   border-radius: 8rpx; }  .personNum {   display: flex;   flex: 1; }  .person .ml-30 {   margin-left: 0.8rem; }  .outer .minus, .outer .num, .outer .plus {   flex: 1;   text-align: center; }  .outer .num {   border-left: 3rpx solid #a9b1bb;   border-right: 3rpx solid #a9b1bb; }  .text {   font-size: 24rpx;   color: #536277;   margin-right: 0.266667rem; }  .person .minus, .person .plus {   width: 25%;   height: 1.813333rem;   display: block;   text-align: center; }  .minus {   font-size: 28rpx;   line-height: 1.813333rem;   font-weight: bold; }  .plus {   font-size: 48rpx;   line-height: 1.6rem; }  .tishi {   width: 0.8rem;   height: 1.813333rem;   margin-left: 0.533333rem; }  .tishi .tsimg {   width: 0.8rem;   height: 0.8rem;   margin-top: 0.506667rem; }  .sureBtn {   color: #fff;   background-color: #58a4ef;   width: 90%;   margin-top: 1.333333rem; }

项目地址及下载:
https://github.com/GaoQ1/wxapp
微信小程序学习用精品:航空订票; wxapp-master.zip (358.29 KB, 下载次数: 1047)

小鱼源码网www.vipsrc.vip

开心一下:

一女极丑,鬼见了都跑。一穷设计师把其制成年画,广告词写的是:挂门头,避邪;挂床头,避孕!此设计师因此得奖,进入小康阶层。
1.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除! 2.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,小鱼源码对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。 3.请您认真阅读上述内容,购买即以为着您同意上述内容。
小鱼源码下载网 » 微信小程序学习用精品:航空订票;

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源