微信小程序-組件-視圖容器

一、view

       一、做用：相似 html 的 div 用來進行頁面佈局，具備塊級盒子特性。

       二、經常使用屬性：設置view盒子點擊後的狀態，以及控制是否影響父盒子的點擊狀態

            

　　三、eg：<view hover-class="類名" hover-start-time=50>  view  </view>

二、scroll-view

　　一、做用：可滾動視圖區域。每個盒子都有本身的滾動條，能夠自定義下拉刷新、上拉加載，每一個視圖區域互不影響。

      ·二、經常使用屬性：

　　　　一、開啓滾動條：使用豎向滾動時，須要給scroll-view一個固定高度，經過 WXSS 設置 height。組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。

                    

                 　　獲取滾動視圖高度：方式1：使用vh單位。方式2：調用api獲取頁面可用高度，獲取到的高度單位值爲px，api：wx.getSystemInfo 。

　　　　     eg：<scroll-view scroll-x="true" height="100vh"></scroll-view>或者<scroll-view scroll-x="true" height="{{height}}px"></scroll-view>

                           js:

 1 Page({
 2     data:{
 3           height:""  
 4     },
 5     onLoad: function (options) {
 6           const sysInfo=wx.getSystemInfoSync()
 7           this.setData({
 8               height:sysInfo.windowHeight
 9           })
10    }
11 })

　　　　二、開啓自定義下拉刷新、上拉加載

                    一、爲何使用自定義下拉刷新，上拉加載

                          頁面有時候須要頭部固定，列表在頭部下面開啓下拉刷新。使用原生下拉刷新會使頭部也被下拉，這時候使用scroll-view的自定義下拉事件

                    二、使用屬性

                           

　　　　　　　　

                    三、eg：<scroll-view refresher-enabled="true" refresher-triggered="bool"  bindrefresherrefresh="bindRefresher"></scroll-view>

　　　　　　　　　

Page({
    data:{
         bool:false    //下拉刷新默認關閉
    },
    bindRefresher(){
         this.setData({
               bool:true      //開啓下拉刷新
         })
    在調用接口後關閉下拉刷新，設置爲false
    }
})

　　　　　　

　　　　　　

三、swiper、swiper-item

　　一、做用：滑塊視圖容器。其中只可放置swiper-item組件，不然會致使未定義的行爲。經常使用於輪播圖效果

        二、經常使用屬性：

　　　　

　　　　eg：<swiper indicator-dots="true" autoplay="true" interval=1000 duration=100>

                                <swiper-item>

                                            <image src="" />

                                </swiper-item>

                      </swiper>

四、movable-area、movable-view

　　一、做用：movable-view的可移動區域，可移動的視圖容器，在頁面中能夠拖拽滑動。movable-view必須在 movable-area 組件中，而且必須是直接子節點，不然不能移動。

 　　二、經常使用屬性：

 　　　　movabal-view屬性

　　　　

   三、eg：<movable-area>

                              <movable-view direction="all"></movable-view>

                </movable-area>

五、cover-view

　　一、做用：覆蓋在原生組件之上的文本視圖。可覆蓋的原生組件包括 map、video、canvas、camera、live-player、live-pusher，其餘組件使用時會被原生組件所覆蓋

             只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。

       二、問題：

                     一、cover-view是覆蓋在原生組件之上的文本視圖，只支持嵌套cover-view、cover-image
                     二、cover-view不支持text-decoration屬性設置
                     三、cover-view設置文本內容換行 white-space: normal;（注意flex佈局時可能不起效果哦）

六、cover-image

　　一、做用：覆蓋在原生組件之上的圖片視圖。可覆蓋的原生組件同cover-view，支持嵌套在cover-view裏。

        二、經常使用屬性：