柿霖不是林 发表于 2017-2-16 17:01:24

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

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







<!--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>


**** Hidden Message *****

Ywenli 发表于 2017-8-18 10:30:15

感谢分享

ryusyu 发表于 2017-8-18 13:27:49

:lol:lol:lol:lol:lol

jack56846 发表于 2020-4-20 11:27:41

专注于与个人游戏开发者合作，有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊
页: [1]
查看完整版本: 微信小程序学习用demo：12306；界面布局学习