微信小程序机票车票列表页样式布局制作设计教程

今天给大家带来微信小程序机票列表页样式布局制作设计教程，主要适合旅游行业机票火车动车高铁车票预订页面，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/airticket/airticket.wxml-->
<view class="container">
<!--头部-->
  <view class="head">
            <view class="go">去程</view>
            <text class="city">上海-北京</text>
            <text class="time">09月15日</text>
            <text class="number">共36条</text>
  </view>
    <view class="wrap">
        <scroll-view scroll-y="true">
        <!--机票信息start-->
            <view class="ticketList" wx:for="{{list1}}" wx:key="id" bindtap="go" id="{{list1.id}}">
                <view class="ticketList_top">
                    <view class="flight_info">
                        <view class="flight_info_t">
                            <text>10:30</text>
                            <view>
                                <view class="timeLine">
                                    <image src="../../images/flight.png" class="img"></image>
                                </view>
                            </view>
                            <text>09:10</text>
                        </view>
                        <view class="flight_info_b">
                            <text>上海虹桥T1</text>
                            <text>北京首都T3</text>
                        </view>
                    </view>
                    <view class="flight_price">
                        <view class="price">
                            <text style="color:#FF7F00">¥</text>
                            <text style="font-size:22px; color:#FF7F00">388</text>
                            <text>起</text>
                        </view>
                        <view>经济舱4.1折</view>
                    </view>
                </view>
                <view class="ticketList_btm">
                    <view>
                        <text>东航MU5101</text><text style="margin:0 15rpx;">|</text>
                        <text>737</text><text style="margin:0 15rpx;">|</text><text>有餐食</text>
                    </view>  
                </view>
                <!--机票价格及预订-->
                <view class="ticketDetailList" wx:for="{{item.list2}}" wx:for-index="{{idx}}" wx:key="id" hidden="{{hidden ? true : false}}" bindtap="ticketSearch_back" id="{{item.id}}">
                    <image class="arrow" src="../../images/arow.png"></image>
                    <view class="book">
                        <view class="cabinType">
                            <text>超值头等舱</text>
                            <text class="privilege">经济舱</text>
                        </view>
                        <view class="price">
                            <text class="rmb">¥</text>
                            <text>1030</text>
                        </view>
                    </view>
                    <view class="priceInfo"> 
                        <view class="reminder">
                            <view class="mealService">
                                <image src="../../images/visa_gray.png"></image>
                                <text>须知</text>
                            </view>
                            <view class="mealService">
                                <image src="../../images/visa_gray.png"></image>
                                <text>退改签详情</text>
                            </view>
                        </view>
                        <view class="moreTicket">余票充足</view>
                    </view>
                </view> 
            </view>
        <!--wrap结束-->
        </scroll-view>
    </view>
<!--尾部-->
  <view class="foot">
            <view class="go">返程</view>
            <text class="city">北京-上海</text>
            <text class="time">09月15日</text>
  </view>
</view>

二、wxss样式页面代码如下：

/* pages/airticket/airticket.wxss */
page {
	height:100%;
}
.container {
	height: 100%;
	width:100%;
	display: flex;
	flex-direction: column;
	align-items:center;
	font-size:26rpx;
}
.head{
	width:100%;
	background:rgba(74,88,106,0.9);
	display: flex;
	flex-direction: row;
	color:#FFFFFF;
	font-size:24rpx;
	padding-bottom:0.4rem;
}
.go,.city,.time,.number{
	width: 3.467rem;
	height: 1.28rem;
	line-height: 1.28rem;
	margin-top: 0.533rem;
	 
}
.go{
    width: 3.84rem;
	height: 1.28rem;
	background:#FFFFFF;
	color:#647184;
	border-radius: 8rpx;
	margin:0.533rem 0.267rem 0 1.28rem;
	text-align: center;
}
.number{
	margin-left: 5.33rem;
}
.wrap {
	width:100%;
	height:93%;
	background:#F0EFF5;
}
.wrap scroll-view {
	height:100%;
}
.wrap scroll-view .ticketList {
	background:#fff;
	margin:0.8rem 0.8rem 0;
	border-radius:15rpx;
	border:2rpx solid #D2D2D5;
	color:#7A8CA4;
}
.wrap scroll-view .ticketList .ticketList_top {
	height:2.8rem;
	border-bottom:2rpx dashed #D2D2D5;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:1.067rem 1.067rem 0 ;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t {
	display:flex;
	flex-direction:row;
	height:55%;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t text {
	font-size:40rpx;
	color:#4A586A;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t .timeLine {
	display:flex;
	flex-direction:column;
	text-align:center;
	position:relative;
	top:-0.4rem;
	margin:0 0.533rem;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t .timeLine text {
	font-size:24rpx;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t .timeLine text:first-child {
	position:relative;
	top:0.16rem;
	color:#FF7F00;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_t .timeLine text:last-child {
	position:relative;
	top:-0.16rem;
}
.wrap scroll-view .ticketList .ticketList_top .flight_info .flight_info_b {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.wrap scroll-view .ticketList .ticketList_top .flight_price {
	text-align:right;	
}
.wrap scroll-view .ticketList .ticketList_top .flight_price .price {
	height:1.467rem;
}
.wrap scroll-view .ticketList .ticketList_btm {
	padding:0.267rem 1.067rem 0.533rem;
	display:flex;
	justify-content:space-between;
	border-bottom:1rpx solid #D2D2D5;
}
.wrap scroll-view .ticketList .ticketList_btm image {
	width:0.667rem; 
	height:0.667rem;
	position:absolute;
	top:22%;
	left:5%;
}
.wrap scroll-view .ticketList .ticketDetailList {
	background:#fff;
	margin:0 0 0.272rem;
	border-bottom:2rpx dashed #D2D2D5;
	color:#7A8CA4;
	padding:0.8rem 1.333rem 0.8rem 0.8rem; 
	position: relative;
}
.wrap scroll-view .ticketList .ticketDetailList:last-child {
	border:0;
}
.wrap scroll-view .ticketList .ticketDetailList .arrow {
	 width:0.453rem;
	 height:0.8rem;
	 position:absolute;
	 right:3%;
	 top:40%;
}
.wrap scroll-view .ticketList .ticketDetailList .book {
	display:flex;
	justify-content:space-between;
}
.wrap scroll-view .ticketList .ticketDetailList .book .cabinType{
	font-size:32rpx;
	color:#000;
	display:flex;
	
}
.wrap scroll-view .ticketList .ticketDetailList .book .cabinType .privilege {
	font-size:24rpx;
	color:#FF7F00;
	text-align:center;
	line-height:1.333rem;
	margin-left:0.267rem;
}
.wrap scroll-view .ticketList .ticketDetailList .book .price {
	font-size:40rpx;
	color:#FF7F00;
	margin-left:0.4rem;
}
.wrap scroll-view .ticketList .ticketDetailList .book .price .rmb{
	font-size:24rpx;
}

.wrap scroll-view .ticketList .ticketDetailList .priceInfo {
	display:flex;
	justify-content:space-between;
}
.wrap scroll-view .ticketList .ticketDetailList .priceInfo .reminder {
	display:flex;
}
.wrap scroll-view .ticketList .ticketDetailList .priceInfo .reminder .mealService {
	text-align:left;
	font-size:24rpx;
	position:relative;
}
.wrap scroll-view .ticketList .ticketDetailList .priceInfo .reminder .mealService image{
	width:0.667rem; 
	height:0.667rem;
	top:10%;
	position:absolute;
}
.wrap scroll-view .ticketList .ticketDetailList .priceInfo .reminder .mealService text{
	margin:0.267rem 0.933rem;
}
.wrap scroll-view .ticketList .ticketDetailList .priceInfo .moreTicket {
	font-size:28rpx;
}


.foot {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height: 2.186rem;
	background:rgba(74,88,106,0.9);
	display: flex;
	flex-direction: row;
	color:#FFFFFF;
	font-size:24rpx;	
}
.img {
	width:0.453rem;
	height:0.533rem;
	margin-top: 0.907rem;
}

三、js页面代码如下：

// pages/airticket/airticket.js

Page({
  data: {
    list1:[{
        id:0,
        list2:[{},{},{},{}]
      },{
        id:1,
        list2:[{},{},{},{}]
      },{
        id:2,
        list2:[{},{}]
      },{},{},{},{},{}],
  
    startDate:'',
    date:'',
    Sweek:'',
    hidden:true
  },
   
   onLoad:function(options){
    this.setData({
      hidden:true,
      startDate:startDate,
      Sweek:options.Sweek,
      date:date
    })
    
  },

  onShow:function(){
  // 页面显示
   
  },
  onHide:function(){
  // 页面隐藏
  },
  onUnload:function(){
  // 页面关闭
  },
  onReady:function(){
    this.animation = wx.createAnimation({
      timingFunction: "ease",
      duration:400,

    })
  },

  // 机票预订页面
  go:function(ev){
    if(this.data.hidden == true 
      ){
      this.setData({
        hidden:false,
      })
    }  
  },
  
})

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