微信小程序之UI与容器组件介绍

微信小程序之UI与容器组件介绍
微信小程序 UI与容器组件总结 ,

微信小程序 ui与容器组件总结

   1.总结与概述

   2.容器组件

           2.1 组件容器（view）

           2.2 可滚动视图容器(scroll-view)

           2.3 滑块视图容器（swiper）

1.总结与概述

1.1 UI组件总结图

1.2 概述

       小程序的UI组件也就是定义用户界面的一系列标签，类似于html标签。一个完整用户响应过程：事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI

2.容器组件

2.1 容器组件(view)

   (1)总结

   (2)例子

       效果图

       page.wxml

<view> <text class="row-view-title">水平布局：</text> <view class="flex-wrp-row"> <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view> <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view> <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view> </view></view><view> <text class="column-view-title">垂直布局：</text> <view class="flex-wrp-column" > <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view> <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view> <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view> </view></view>