微信小程序开发技术教程:视图容器组件详解(一)

2018/12/26 22:55:25
摘要: 微信小程序开发的时候,需要设计一个视图容器组件的问题,它有多种视图样式,每一种都有需要注意的内容。所以

微信小程序开发的时候,需要设计一个视图容器组件的问题,它有多种视图样式,每一种都有需要注意的内容。所以小编打算整理一下相关教程,为大家介绍一下微信小程序的视图容器组件。今天就先说两个样式,剩下的我们下一期再详解

视图容器:

就和HTML的DIV差不多,可以被其他组件包含,也可以包含着其他的组件,用起来比较方便,没有固定的结构

1、视图样式flex-direction: row

效果图:

 小程序开发

WXML代码如下:

<view>

    <view class="flex-item red" ></view>

    <view class="flex-item green" ></view>

    <view class="flex-item blue" ></view>

</view>

WXSS代码如下:

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

2、视图样式flex-direction: column

效果图:

微信小程序开发教程 

WXML代码如下:

<view class="flex-wrp column">

    <view style="background: red"></view>

    <view style="background: green"></view>

    <view style="background: blue"></view>

</view>

WXSS代码如下:

.column{

   flex-direction:column;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

 

声明:文章"微信小程序开发技术教程:视图容器组件详解(一)"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 开发企业微信2.0,融合企业号统一管理再出发

    现在的微信开发市场常见的是公众号开发、小程序开发以及一些商城开发,而这些都是关于自媒体或者企业经营的产品开发,极少有关于企业管理的产品开发出现。

  • 为什么我们都说微信小程序会火?

    微信小程序自上线以来的不温不火到现在的温温火火,可能还会在未来变得红红火火,都在验证着很多人对小程序会火的预言的正确性。为什么会有那么多人看好小程序的未来,又为什么那么多会觉得小程序终将会火?其实这些为什么,都是因为有了预兆。

  • 开发微信小程序的意义所在

    每一样新事物的出现都会有它该有的意义,就像微信小程序被开发之后一样,不仅对于微信官方有着重要意义,而且对市场上的开发者来说也有一定的意义。

  • 旅行社要不要开发微信小程序?可以怎么用?

    这是一份假装真心实意的问答调查情景式推文,总结一下旅行社与小程序之间剪不断理也不乱的关系,仔细看看还有点小用处。

  • 广州微信小程序开发,是否会颠覆应用格局

    微信小程序被开发后,不管以后会不会给应用界带来颠覆性的影响,但首先我们能确定

  • 广州公司初涉微信小程序开发应该关心什么问题

    微信小程序开发的这股热潮不断地在升温,随着微信事业群对小程序各类功能的开放以及开发门槛的降低