仿智行火车票12306微信小程序

2019年12月26日

一.开发前准备

1.设计稿准备

2.各个页面的图片转变

ps：

1.图片目录可以放在根目录，通过拼音首字母进行模块区分也命名

2.页面类型建议用英文单词。

二.具体实现

1.底部menubar实现，

image.png

2.首页海报轮播图实现

image.png

3.首页火车票查询模块实现

3.1tab页签切换

image.png

3.2查询模块用from表单实现

image.png

实现参数传递和页面跳转

image.png

4.快捷导航设置

image.png

.icon {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

.item {
  width: 25%;
  text-align: center;
  margin: 0 auto;
}

.menu {
  font-size: 11px;
  width: 100px;
}

四.火车票列表页面设计

1.动态计算高度

image.png

2.for循环加载

image.png

3.底部固定悬浮效果

image.png

image.png

五.个人中心页面设计

1.顶部蓝色背景区域设置

image.png

.amountBg {
  height: 100px;
  background-color: #5495e6;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.img {
  margin-left: 20px;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
}

.nav {
  width: 15px;
  color: #fff;
}

2.横向订单导航设计

image.png

image.png

.order {
  width: 94%;
  height: 70px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  position: absolute;
  top: 90px;
  margin-left: 3%;
}

.desc {
  width: 25%;
  font-size: 13px;
}

3.纵向列表导航设计，先设计一个，其他复用

image.png

.item {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  height: 50px;
  align-items: center;
}

.icon {
  width: 50px;
  text-align: center;
}

.itemName {
  width: 40%;
  font-size: 14px;
  font-weight: bold;
}

.right {
  width: 40%;
  text-align: right;
}

六.抢票界面设计

1.写死导航

image.png

2.顶部提示

image.png

3.主要数据项

image.png

.opr {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background-color: #29ce73;
  color: #fff;
  line-height: 45px;
  font-size: 13px;
  text-align: center;
}

.start {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  border: 1px solid red;
  color: red;
  line-height: 45px;
  font-size: 13px;
  text-align: center;
}

4.底部固定分享部分

image.png

image.png