源码下载地址：https://github.com/gaojing2262/WXAPP_ZhiXing
记得Star哟
1.小程序中主要实现了智行火车票、机票信息的搜索功能
（1）小程序中实现了顶部轮播图
（2）火车票与飞机票的切换效果
（3）出发城市与到达城市的切换
（4）根据时间选择器进行票务筛选功能
最终实现的UI效果：
2.轮播图部分的实现
<view class="content">
<view class="header" style="height:80px;">
<swiper style="height:100%" indicator-dots="true" autoplay='true' interval='3000'>
<block wx:for="{{swipers}}" wx:key="{{item}}">
<swiper-item>
<image src="{{item.url}}" mode="widthFix" style="width:100%"></image>
</swiper-item>
</block>
</swiper>
</view>
indicator-dots="true" 显示面板指示点
autoplay='true'： 实现自动播放
interval='3000' 每一张图显示的时间间隔
wx:for="{{swipers}}" ： 从云数据库的swipers表中读取数据，图片的存取方式为url链接
可参考微信小程序云开发数据库指引：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html
3.火车票、飞机票样式的切换效果
该功能的实现主要是借助三目表达式来实现的，源码如下：
/*wxml部分*/
<view class="searchbar">
<view id="1" class="{{currentId == 1? 'selected' : 'unselected'}}" bindtap="switchChange">火车票</view>
<view id="2" class="{{currentId == 2? 'selected' : 'unselected'}}" bindtap="switchChange">飞机票</view>
</view>
/*wcss部分*/
.searchbar {
display: flex;
flex-direction: row;
text-align: center;
margin-top: -20px;
margin-left: 14px;
width: 90%;
height: 40px;
border-radius: 0.5em 0.5em 0 0;
opacity: 0.7;
background: #696969;
}
.selected {
color: #000;
background: #fff;
width: 40%;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
opacity: 1;
}
.unselected {
color: #fff;
background: #696969;
width: 40%;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
}
/*js部分*/
data：{
currentId: 1,
}
switchChange: function (e) {
var id = e.currentTarget.id;
this.setData({
currentId: id
})
if (id != 1) {
wx.switchTab({
url: '../plane/plane',
})
}
},
实现的原理：
首先给火车票及飞机票的view部分赋值id为1和2，添加一个点击事件switchChange，通过点击事件获取当前view的id值，当两部分view的id分别为1和2，即点击哪个view，该部分就显示为选中状态。
4.出发地、目的地、两地切换效果、出发日期选择的实现
/*wxml部分*/
<view class="place">
<view class="weui-cell__bd heb">
<picker bindchange="bindSrcCityChange" value="{{srcCityIndex}}" range="{{cities}}" range-key="name">
<view class="weui-select weui-select_in-select-after">{{cities[srcCityIndex].name}}</view>
</picker>
</view>
<view class="ima">
<image src="../images/icon/hcp/xz.jpg" style="width:45px;height:45px" mode="widthFix" bindtap="switchCity"></image>
</view>
<view class="weui-cell__bd bj">
<picker bindchange="bindDesCityChange" value="{{desCityIndex}}" range="{{cities}}" range-key="name">
<view class="weui-select weui-select_in-select-after">{{cities[desCityIndex].name}}</view>
</picker>
</view>
</view>
<view class="go">
<view class="weui-cell__bd date">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</view>
<view class="day">
<view class="weui-input" bindchange="bindDateChange">{{week}}</view>
</view>
<view class="qj">
<image src="../images/icon/hcp/qj.png" style="width:24px;height:24px" mode="widthFix"></image>
</view>
</view>
<view class="type">
<view class="gt">高铁动车</view>
<view class="weui-cell__ft">
<switch checked color="#26a2ff" />
</view>
<view class="xs">学生票</view>
<view class="weui-cell__ft">
<switch checked color="#26a2ff" />
</view>
</view>
<view class="query">
<button class="cx" bindtap="Select">查询</button>
</view>
完整版代码下载地址：https://github.com/gaojing2262/WXAPP_ZhiXing
