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

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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 定制化微信小程序为何价格会高那么多

    无论是定制版本的微信小程序还是公众号、微商城,价格都会比模板制作的高出一些。那为什么会高?又高在哪里?这两个问题的回答就能让企业商家看出定制开发是否值得,所以小编得摩拳擦掌来好好夸大其词了。

  • 政府单位开发微信小程序有什么好处

    小编通过软文谈论过很多行业开发微信小程序的好处,今天这篇推文同样也要来讨论开发的好处,不过今天的主题是关乎政府单位的话题,与商业行业还是有些不同,所以小程序带给它的作用与好处相对会更偏向公益化,而非利益化。

  • 微信小程序开发教程之自定义toast实例

    自从小程序发布以后,越来越多的开发者投入到小程序的开发当中去,而且微信有着相当完善的API和组件,使用起来简单

  • 开发微信小程序,用“社交+购物”模式促爆发式发展

    微信小程序从面世以来,官方就不断在朝服务直达搜索、公众号串联小程序、线上线下打通、好友社交传播等方向努力开发

  • 广州企业外包微信小程序开发要注意什么

    广州企业千千万,微信小程序开发公司也不少,相较于企业自己开发小程序,选择开发公司会比较省时省力。不过虽然如此,但是这并不代表企业就没有注意事项,在选择好开发公司之后,自己的也要融入到开发的工作当中,将自己的想法全面传达给开发公司

  • 微信小程序开发难不难,广州互诚科技告诉你

    在百度网页上,很多人在询问微信小程序开发难不难,小编也一样用这样的文字去搜寻答案