微信小程序UI------实现携程首页顶部的界面(弹性布局)

今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多。

可以看看这篇博客 快速使用CSS 弹性盒子

效果图如下:

image

主要是携程首页的四个模块;

代码:

<view class="page">

    <view class="page__bd">


        <view class="section__nav">
            <view class="left border__right" bindtap="btn1"><!--bindtap 点击事件 -->
                酒店
            </view>
            <view class="right">
                <view class="item border__right border__bottom" bindtap="btn2">海外酒店</view>
                <view class="item border__bottom" bindtap="btn3">团购</view>
                <view class="item border__right">特价酒店</view>
                <view class="item">名宿-客栈</view>
            </view>
        </view>



        <view class="section__nav" style="background:#3D98FF;">
            <view class="left border__right">
                机票
            </view>
            <view class="right">
                <view class="item border__right border__bottom">火车票-抢票</view>
                <view class="item border__bottom" >汽车票-船票</view>
                <view class="item border__right">特价机票</view>
                <view class="item">专车</view>
            </view>
        </view>



        <view class="section__nav" style="background:#44C522">
            <view class="left border__right">
                旅游
            </view>
            <view class="right">
                <view class="item border__right border__bottom">目的地攻略</view>
                <view class="item border__bottom" >邮轮旅行</view>
                <view class="item border__right">周边游</view>
                <view class="item">定制旅行</view>
            </view>
        </view>



    <view class="section__nav" style="background:#FC9720">
            <view class="left border__right">
                玩乐
            </view>
            <view class="right">
                <view class="item border__right border__bottom">美食林</view>
                <view class="item border__bottom" >购物</view>
                <view class="item border__right">周边美食</view>
                <view class="item">周边好玩</view>
            </view>
        </view>

    </view>
</view>

CSS代码

.page__bd{
    padding:0 10rpx;
}

.section__nav{
    display:flex;
    background:#FF697A;
    height:100px;
    color:#fff;
    margin-bottom:10rpx;
}

.left{
    width:33.33%;
    font-size:14px;
}

.border__right{
    border-right:1px solid #fff;
}

.border__bottom{
    border-bottom:1px solid #fff;
}

.right{
    width:66.67%;
    flex-wrap:wrap;
}

.left,.right{
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}

.item{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    height:50px;
    font-size:14px;
}

一个简单的小案例,界面练习,和H5的弹性盒子相同。

源码点击下载
https://git.oschina.net/zhangqie/wechat-applet-basics/tree/ctrip-ui/

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,277评论 0 7
  • MyLayout是一套功能全面的iOS开源UI界面布局框架。它囊括了前端所有流行的界面布局技术和解决方案,同时具有...
    欧阳大哥2013阅读 6,495评论 3 50
  • @转自GitHub 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有两种, IE 盒子模...
    YT_Zou阅读 1,170评论 0 1
  • 今年的中秋又没有回家。鹤城到秦皇岛不下两千里,往返的路费可不是我们这帮穷学生所能担负的,况且短短的三天假期,真的来...
    断剑残烛阅读 137评论 0 2
  • 《诗》云:“瞻彼淇澳,菉竹猗猗。有斐君子,如切如磋,如琢如磨。瑟兮僩兮,赫兮咺兮。有斐君子,终不可谖兮!“如切如...
    杳眇阅读 125评论 0 0
  • 奶茶的面纱今天被解密了。怪不得喝奶茶会发胖,奶茶热量高。这成分就是罪魁祸首啊。第一次亲手做奶茶还是蛮好玩的。看着自...
    人生输入法阅读 300评论 0 1
  • 媒体类型(MIME) Web服务器会为所有的HTTP对象数据附加一个MIME类型。当Web浏览器从服务器取回一个对...
    tsyeyuanfeng阅读 426评论 0 1
  • 小时候的记忆有很多都忘记了 只是每次听母亲说这些事 我都觉得特别心酸 开始从我有记忆说起吧 读小学了 我性格特别害...
    刘紫薇薇薇呀阅读 90评论 0 1