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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 广州地区中小企业适合开发微信小程序吗

    广州地区密布着个各种类型的中小企业,这些企业在微信小程序的开发上必定会存在不同的看法,有些考虑公司规模觉得不合适开发小程序,而有些公司就会考虑跟上潮流与长远发展去开发小程序。

  • 微信小程序开发过程必须解决的几大问题

    开发者在选择进入到微信小程序市场中的时候,首先要触及到的就是市场需求定位、开发团队组建、宣传推广问题以及数据监测问题。这几个方面是在策划

  • 微信小程序与公众号的区别是什么?

    微信事业群在微信开发的过程中,孵化出微信小程序与微信公众号这两个方向,然后目前微信小程序开发

  • 广州企业开发微信小程序后有什么优势?

    小程序开发可谓是现下的一股时尚热潮,不仅是因为小程序的新兴与潮流

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

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

  • 微信小程序开发工具改版上线,开发变得更容易

    为了满足开发者在小程序开发各个阶段的需求,微信官方在近日上线了全新改版的微信开发者工具,新增了测试系统、腾讯云工具、小程序分阶段发布、小程序性能监控