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

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之间存在话题,类似小程序取代APP、开发小程序还是开发APP等话题层出不穷,但其实,两者并非全是优势或者全是劣势,需求开发者更是要对比两者的优劣势之后,才能做出开发APP还是小程序的决策。

  • 广州微信小程序开发公司:如何打造爆款小程序

    “广州小程序开发之如何打造爆款小程序”这个标题,广州小程序开发部分只是为了打个假广告,

  • 微信小程序能给用户带来什么使用价值及意义?

    用户之所以使用微信小程序,很大程度都是因为小程序能给用户带来方便,让生活通过小程序而更加便捷。所以,小程序之于用户来说的使用价值与意义,我们可以从它带来的便利性

  • 微信小程序,是否会成为O2O重新崛起的契机?

    O2O这一商业模式,在经过一段时间的推广与试水之后,效果并不理想,除了出行以及餐饮外卖这两个领域在O2O模式上有一定的发展之外,很多行业都取不到实质性的发展,甚至到了谈O2O色变的地步。而造成这种局面的主要原因是什么?小编认为是缺乏一个可以连接线上场景与线下场景的实质式平台。

  • 目前的微信小程序所不能及的三个方面

    微信小程序从上线至今大约半年,腾讯官方不断地在调整优化其功能设置,尽量让小程序的开发体验与使用体验做到令人满意的程度。可是,至今有三个方面仍是小程序所不能及的,这三个方面也限制了小程序的在某些方面的推广与发展,目前来看是不利的。

  • 广州微信小程序开发:论小程序线下的发展空间

    小程序的出现后,在刚开始却没有像业界传说中那么令人满意,甚至在经过一段时间的体验之后