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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发工具改版上线,开发变得更容易

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

  • 微信小程序开发能给线下商家带来哪些好处

    小程序的出现,在一定程度上方便了微信用户的生活外,也给企业商家带来新一轮的微信营销利益,

  • 微信小程序内可以直接打开网页的意义何在

    之前腾讯官方就借助微信公开课这个平台公布微信小程序可以直接打开内嵌网页这个新功能

  • 微信小程序开发三大需要明确的合作陷阱

    在寻求与微信小程序第三方开发公司合作的时候,企业商家可能会有遇到非正规开发公司的可能,这些公司开出的合作

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

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

  • 微信小程序开发升级应用,玩转高端多媒体功能!

    自从四月份微信官方像开了挂一样地开发小程序之后,它升级应用功能的脚步就再也停不下来,所以现在又带来了两个新的高端功能,让运营者可以轻松玩转多媒体功能

河北快三 河北快3 pc蛋蛋网站 河北快三app下载 河北快3 江苏快3免费试玩 pc蛋蛋28 pc蛋蛋网站 pc蛋蛋 湖北快3投注平台