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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发是什么?如何开通微信小程序

    微信小程序,简称小程序,洋气名曰mini program,过去式名称曰”小应用“。其实,微信小程序就是一种微信版本的轻应用

  • 广州地区中小企业适合开发微信小程序吗

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

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

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

  • 初创企业开发微信小程序会有什么好处

    相比起APP开发,微信小程序开发对于刚刚步入创业阶段的企业来说会是更好的选择,在资金、人力、物力都还不成熟的阶段,企业开发小程序会比开发App获得更多的好处。这些好处主要就有以下三个部分:

  • 企业在开发微信小程序之前,要如何做需求分析

    每个企业,在确定开发微信小程序之前,都必须要做好需求分析,将精准的开发需求文档交付到开发者

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

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

大象彩票APP 众赢彩票充值 河北快3 河北快3 众赢彩票充值中心 江苏快3官网 2m彩票官网 冠军彩票充值 好彩客充值 大信彩票充值