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

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开发的区别

    微信小程序被说看成是一个原生App似的产品,这并不是空穴来风,而是小程序在开发上的定位与功能

  • 微信小程序市场的商业价值体现在哪?

    张小龙在微信小程序上线的时候就说过,未来两年内,小程序将会取代APP应用80%的市场。而事实是否如此,目前我们还是无法去下结论的。但是其带来

  • 实体店与微信小程序组合,有哪些引流盈利方式?

    从微信小程序上线以来,因为符合O2O以及“互联网+”的概念,所以逐渐被线上行业所接纳并应用到其中,形成一种“实体店+小程序”的组合

  • 现在开发微信小程序,是否为时已晚?

    微信小程序已经上线半年由于,据不完全统计,现有的微信小程序大概已经达到两万个以上的数量,加上一些正在开发当中的小程序,数量加起来也应该有三万来个。很多企业商家看到这个数据,就会觉得,现在的小程序市场是否已经被抢占完毕,再去开发微信小程序是否