找回密码
 立即注册

扫一扫,访问微社区

查看: 8853|回复: 3

微信小程序学习用demo:12306;界面布局学习

[复制链接]
发表于 2017-2-16 17:01:24 | 显示全部楼层 |阅读模式
点评:仅有界面设计部分,仅供学习参考;







[mw_shl_code=html,true]<!--pages/coach/coach.wxml-->
<view class="page-top"></view>
<view class="bg">
    <view class="container">
        <!--<view class="query-head" >
            <view class="tab tag">
                <text>单程</text>
            </view>
            <view class="tab">
                <text>往返</text>
            </view>
        </view>-->
        <view class="query-box">
            <view class="query-row query-city">
                <view class="begin-city">
                    <text class="city-descript">出发城市</text>
                    <text class="city">上海</text>
                </view>
                <view class="switch">
                    <image class="switch-img" src="../../images/switch.png"></image>
                </view>
                <view class="end-city">
                    <text class="city-descript">到达城市</text>
                    <text class="city">北京</text>
                </view>
            </view>
            <view class="query-row query-date">
                <view>
                    <text class="city-descript">出发日期</text>
                    <text class="date">11月28日</text>
                </view>
                <view>
                    <text class="day">明天</text>
                </view>
            </view>
            <view class="query-row btn-query">
                <button type="primary" style="background-color:#5495E6">查询</button>
            </view>
            <view class="query-history">
                <scroll-view scroll-x="true">
                    <text wx:for="{{coachHistories}}">{{item.begin}} -> {{item.end}}</text>               
                </scroll-view>
            </view>
        </view>
        <view class="query-box extension">
        <view class="query-row">
            <view class="extension-item">
                <image src="../../images/coach-extension1.png"></image>
                <text>火车票</text>
            </view>
            <view class="extension-item">
                <image src="../../images/coach-extension2.png"></image>
                <text>机场巴士</text>
            </view>
            <view class="extension-item">
                <image src="../../images/coach-extension3.png"></image>
                <text>景区直达</text>
            </view>
            <view class="extension-item">
                <image src="../../images/coach-extension4.png"></image>
                <text>船票</text>
            </view>
        </view>
    </view>
</view>
</view>[/mw_shl_code]


游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

245

回帖

63

金钱

新人求带

积分
0
发表于 2017-8-18 10:30:15 | 显示全部楼层
感谢分享
回复

使用道具 举报

1

主题

42

回帖

157

金钱

咫尺尊享

积分
44
发表于 2017-8-18 13:27:49 | 显示全部楼层
回复

使用道具 举报

0

主题

408

回帖

600

金钱

新人求带

积分
0
发表于 2020-4-20 11:27:41 | 显示全部楼层
专注于与个人游戏开发者合作,有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-12-23 09:03 , Processed in 0.113104 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表