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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 影响广州微信小程序定制开发费用的因素

    在目前的广州微信圈市场上,不会存在每一个定制开发的小程序费用都一样的情况,不同的功能需求、不同的开发主体以及市场环境都有可能成为影响开发价格的因素。

  • 关于降低微信小程序定制开发成本的两点建议

    虽然说微信小程序定制开发的价格比APP开发低了很多倍,但是一些不必要的费用还是需要去避免的,特别是对于微信小程序定制开发成本把控比较严格的一些企业商家来说,更加需要去降低开发成本,把钱花在刀刃上。对此,小编有几点关于

  • 一步教您学会微信小程序的上线发布流程

    小编在找了一资料之后,又根据公司在小程序开发业务上的实际情况,整理了一下小程序调试发布的步骤详细内容

  • 广州微信小程序,组合拳开发促进高效收银

    关于酒店、餐饮等行业的收银结账开发票工作,经常需要排队已经成为消费者的诟病。为了解决这个常存的麻烦,微信官方于6月29日在厦门的公开课里提出了微信小程序开发“组合拳”模式,

  • 微信小程序开发,想要突破重围力压对手这样做

    ​虽说微信小程序现在的开发市场竞争力还不是很大,但是小程序的开发数量还是在以快速的增加速度增长着,因而市场竞争压力也会逐渐加大,一如公众号当初的发展趋势一样。对于一些比较迟进入小程序

  • 开发一个微信小程序到底能干嘛

    微信小程序这个名词,在张小龙向外界预告时就已经被外界将热度炒到一个较高的位置。但是,名词虽然熟悉,其功用却仍旧很多人没有了解