欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

小程序UI与容器组件（view，scroll-view，swiper）

发布：2018-04-13 14:29浏览： 次来源：网络 作者：cola

作者：小巷下起了雨，来自原文地址

目录

    1.总结与概述
    2.容器组件
            2.1 组件容器（view）
            2.2 可滚动视图容器(scroll-view)
            2.3 滑块视图容器（swiper）

1.总结与概述

1.1 UI组件总结图

小程序UI与容器组件（view，scroll-view，swiper）(图2)

 

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

 2.容器组件

 
2.1 容器组件(view)
    (1)总结
 
小程序UI与容器组件（view，scroll-view，swiper）(图4)
    (2)例子
        效果图
        page.wxml

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

						

						

							 

					

					

						

							        page.wxss

					

					

						

							

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

						

						

							 

						

							 

					

					

						 

				

					
		

	




 

          

          

          

        

        

          
          
        

        

        

          
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

        

      

      

      
 相关文章
        
      

    

    

      
 最新文章
        
      

      
 推荐文章
        
      

      
 随机文章
        
      

      
 热门小程序
        

          
        

      

    

  

   
  
 开发文档  | 运营教程 小程序模板  | 小程序应用   | 标签大全 

  Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有