微信小程序学习用demo：12306；界面布局学习

柿霖不是林

点评：仅有界面设计部分，仅供学习参考；







[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]

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

Ywenli

感谢分享

ryusyu

jack56846

专注于与个人游戏开发者合作，有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊