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

您所在的位置：网站首页 › 微信抢票流程图 › 仿智行火车票12306微信小程序

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

2024-07-10 02:08| 来源: 网络整理| 查看: 265

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

【本文地址】

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

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

今日新闻

推荐新闻