网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

小程序UI與容器組件（view，scroll-view，swiper）

發(fā)布時間：2018-04-13 14:29 所屬欄目：小程序開發(fā)教程
作者：小巷下起了雨，來自原文地址

目錄

    1.總結(jié)與概述
    2.容器組件
            2.1 組件容器（view）
            2.2 可滾動視圖容器(scroll-view)
            2.3 滑塊視圖容器（swiper）

1.總結(jié)與概述

1.1 UI組件總結(jié)圖

 

 1.2 概述
        小程序的UI組件也就是定義用戶界面的一系列標簽，類似于html標簽。一個完整用戶響應(yīng)過程：事件觸發(fā)——>UI組件接收到事件——>觸發(fā)js函數(shù)響應(yīng)事件——>更新UI
 

 2.容器組件

 
2.1 容器組件(view)
    (1)總結(jié)
 
    (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. 
							

						

						

							 

						

							 

					

					

						 

				

					
		

	




            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://www.xiuhaier.com/wxmini/doc/course/23332.html 復(fù)制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢 
    

      
    

    
  






 



    

        AI智能客服
        ×