微信小程序视图容器

最新推荐文章于 2024-05-22 19:33:07 发布

陈皮小桔

最新推荐文章于 2024-05-22 19:33:07 发布

阅读量428

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_40146447/article/details/90520006

版权

本文详细介绍了微信小程序中视图容器view的布局特性，包括flex容器的方向(row/row-reverse/column/column-reverse)、flex-wrap换行设置、justify-content主轴对齐方式以及align-items和align-content在侧轴上的对齐策略。通过对这些属性的理解，可以更好地掌握微信小程序的布局设计。

摘要由CSDN通过智能技术生成

一.view
相等于html中的

标签，有4个属性；
hover和hover-class与点击效果有关，分别设置是否启用点击和设置点击效果；
hover-start-time和hover-stay-time与点击的时间有关；
使用bindtap属性进行事件绑定；
微信小程序页面布局采用FLEX布局，为“弹性布局”；
（1）display：block；块内容器模式；
（2）display：flex；行内容器模式；

<view class="flex-row1" style="display:block;">
  <view class="flex-view-item1">1</view>
  <view class="flex-view-item1">2</view>
  <view class="flex-view-item1">3</view>
</view>
<view class="flex-row1" style="display:flex;">
  <view class="flex-view-item1">1</view>
  <view class="flex-view-item1">2</view>
  <view class="flex-view-item1">3</view>
&l