源码下载地址:https://github.com/gaojing2262/WXAPP_ZhiXing
记得Star哟
(1)小程序中实现了顶部轮播图
(2)火车票与飞机票的切换效果
(3)出发城市与到达城市的切换
(4)根据时间选择器进行票务筛选功能
indicator-dots="true" 显示面板指示点
autoplay='true': 实现自动播放
interval='3000' 每一张图显示的时间间隔
wx:for="{{swipers}}" : 从云数据库的swipers表中读取数据,图片的存取方式为url链接
可参考微信小程序云开发数据库指引:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html
该功能的实现主要是借助三目表达式来实现的,源码如下:
火车票
飞机票
.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;
}
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,该部分就显示为选中状态。
代码如下:
{{cities[srcCityIndex].name}}
{{cities[desCityIndex].name}}
{{date}}
{{week}}
高铁动车
学生票
.place {
display: flex;
flex-direction: row;
width: 90%;
height: 50px;
margin: 0 auto;
}
.heb {
padding-top: 12px;
width: 30%;
height: 50px;
text-align: center;
color: #000;
margin: 10 auto;
font-weight: bold;
}
.ima {
margin-left: 30px;
margin-top: 15px;
width: 30%;
}
.bj {
padding-top: 12px;
width: 30%;
height: 50px;
text-align: center;
color: #000;
margin: 10 auto;
font-weight: bold;
}
.go {
width: 90%;
height: 45px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.date {
padding-top: 12px;
width: 40%;
height: 45px;
text-align: center;
margin: 0 auto;
font-weight: bold;
}
.day {
padding-top: 12px;
width: 60%;
height: 45px;
text-align: right;
margin: 0 auto;
color: #1e90ff;
}
.qj {
padding-top: 12px;
width: 7%;
margin: 0 auto;
}
.type {
width: 90%;
height: 40px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.gt {
padding-top: 6px;
width: 30%;
height: 45px;
text-align: left;
margin-left: 0px;
margin: 0 auto;
}
.xs {
padding-top: 6px;
width: 20%;
height: 45px;
text-align: center;
margin: 0 auto;
}
.query {
width: 85%;
height: 45px;
background: #1e90ff;
margin: 0 auto;
border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.cx {
color: #fff;
padding-top: 0px;
}
.other {
width: 90%;
height: 25px;
display: flex;
flex-direction: row;
margin: 0 auto;
}
.ls{
width: 45%;
color: #696969;
font-size: 13px;
margin: 3px 20px;
text-align: center
}
.cy {
width: 90%;
margin: -2px auto;
height: 25px;
}
.fw {
width: 90%;
height: 40px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.qp {
width: 25%;
height: 45px;
margin-left: 15px;
}
.xz {
width: 25%;
height: 45px;
margin-left: 20px;
}
.hh {
width: 25%;
height: 45px;
margin-left: 20px;
}
.jd {
width: 25%;
height: 45px;
margin-left: 20px;
}
.fw-2 {
width: 90%;
height: 10px;
margin: 5px auto;
display: flex;
flex-direction: row;
}
.qb-2 {
width: 25%;
height: 10px;
margin: 0 auto;
text-align: center;
font-size: 12px;
}
.weui-cell__ft{
zoom: 0.7;
margin: 9px auto
}
data: {
swipers: [
'/images/haibao/1.jpg',
'/images/haibao/2.jpg',
'/images/haibao/3.jpg'
],
currentId: 1,
cities: [
"石家庄", "乌鲁木齐", "北京", "上海", "广州", "深圳", "天津", "重庆", "武汉", "长沙", "太原",
"兰州", "西宁", "南京", "郑州", "沈阳",
],
srcCityIndex: 1,
desCityIndex: 2,
date: [
"2019-11-13"
],
week: '周四'
},
/**
* 出发地
*/
bindSrcCityChange: function (e) {
this.setData({
srcCityIndex: e.detail.value
})
},
/**
* 目的地
*/
bindDesCityChange: function (e) {
this.setData({
desCityIndex: e.detail.value
})
},
/**
* 交换地址
*/
switchCity: function (e) {
var i = this.data.srcCityIndex
var j = this.data.desCityIndex
this.setData({
srcCityIndex: j,
desCityIndex: i
})
},
/**
* 星期切换
*/
bindDateChange: function (e) {
var currentDate = new Date(e.detail.value)
var weekString = '周三'
switch (currentDate.getDay()) {
case 1:
weekString = '周一'
break
case 2:
weekString = '周二'
break
case 3:
weekString = '周三'
break
case 4:
weekString = '周四'
break
case 5:
weekString = '周五'
break
case 6:
weekString = '周六'
break
default:
weekString = '周日'
}
this.setData({
date: currentDate.getMonth() + 1 + '月' + currentDate.getDate() + '日',
week: weekString,
currentDate: currentDate
})
},
Select: function (e) {
wx.navigateTo({
url: '/pages/tickets/tickets?srcStation=' + this.data.cities[this.data.srcCityIndex].name +
"&desStation=" + this.data.cities[this.data.desCityIndex].name + "&date=" + this.data.date + "&week=" + this.data.week + "¤tDate=" + this.data.currentDate
})
},