小程序模板网

小程序UI与容器组件(view,scroll-view,swiper)

发布时间:2018-04-13 14:29 所属栏目:小程序开发教程
作者:小巷下起了雨,来自原文地址

目录

    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

							
  1. <view>
  2. <text class="row-view-title">水平布局:</text>
  3. <view class="flex-wrp-row">
  4. <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view>
  5. <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  6. <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
  7. </view>
  8. </view>
  9. <view>
  10. <text class="column-view-title">垂直布局:</text>
  11. <view class="flex-wrp-column" >
  12. <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view>
  13. <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
  14. <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
  15. </view>
  16. </view>
 
        page.wxss

							
  1. .flex-item-red{
  2. background-color: red;
  3. height: 200rpx;
  4. width: 200rpx;
  5. text-align: center;
  6. line-height: 200rpx;
  7. }
  8. .flex-item-green{
  9. background-color: green;
  10. height: 200rpx;
  11. width: 200rpx;
  12. text-align: center;
  13. line-height: 200rpx
  14. }
  15. .flex-item-blue{
  16. background-color: blue;
  17. height:
 
 
 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23332.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询