免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具，讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌，搶占AI流量入口！  點擊查看

小程序模板網

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

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

目錄

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

1.總結與概述

1.1 UI組件總結圖

 

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

 2.容器組件

 
2.1 容器組件(view)
    (1)總結
 
    (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.szcjxy.com/wxmini/doc/course/23332.html 復制鏈接 
                    如需定制請聯系易優(yōu)客服咨詢： 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

    在線客服