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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序升级页面体验让用户爱上你的小程序

    昨日微信小程序开放了新的页面能力,在原有页面能力的基础上对其进行优化和升级,以提高开发者的开发效果跟用户体验的满意度。而升级优化体现在哪些方面,就是小编在今天这篇推文里的主要写作目的。

  • 广州企业开发附近的小程序能带来什么好处

    附近的小程序是基于微信LBS定位技术支持而开发,现在打开微信首页“发现-小程序-附近的小程序”,就能发现附近商家的小程序信息

  • 微信小程序技术教程之用户授权登陆开发

    微信用户授权登陆的时候,用来记录用户身份唯一性的标识就是微信中的unionID,所以在做授权登陆开发的时候,如何拿到

  • 坐拥微信小程序,颠覆传统教育方式

    随着现代生活水平、消费习惯以及互联网的发展,传统的以线下场景为主的教育模式已经不太能适应这个现代社会的发展、不能完全符合人们的学习需求。所以,用传统方式来经营的教育行业急需要调整完善自身的发展方式,以此来融入到互联网的发展潮流当中。

  • 读懂广州微信小程序开发公司开发流程,识破微信开发骗局

    目前光柱市场上的微信小程序开发公司层出不穷,其中有正规的,当然相应的也存在骗局

  • 微信小程序与APP之间的优劣势具体是什么?

    自从微信小程序被开发出来之后,被称之为“原生App”,就一直与APP之间存在话题,类似小程序取代APP、开发小程序还是开发APP等话题层出不穷,但其实,两者并非全是优势或者全是劣势,需求开发者更是要对比两者的优劣势之后,才能做出开发APP还是小程序的决策。