1、view
1、作用：類似 html 的 div 用來進行頁面布局，具有塊級盒子特性，
2、常用屬性：設定view盒子點擊后的狀態，以及控制是否影響父盒子的點擊狀態
3、eg：<view hover- hover-start-time=50> view </view>
2、scroll-view
1、作用：可滾動視圖區域，每一個盒子都有自己的滾動條，可以自定義下拉重繪、上拉加載，每個視圖區域互不影響，
·2、常用屬性：
1、開啟滾動條：使用豎向滾動時，需要給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 onl oad: function (options) { 6 const sysInfo=wx.getSystemInfoSync() 7 this.setData({ 8 height:sysInfo.windowHeight 9 }) 10 } 11 })
2、開啟自定義下拉重繪、上拉加載
1、為什么使用自定義下拉重繪，上拉加載
頁面有時候需要頭部固定，串列在頭部下面開啟下拉重繪，使用原生下拉重繪會使頭部也被下拉，這時候使用scroll-view的自定義下拉事件
2、使用屬性
3、eg：<scroll-view refresher-enabled="true" refresher-triggered="bool" bindrefresherrefresh="bindRefresher"></scroll-view>
Page({ data:{ bool:false //下拉重繪默認關閉 }, bindRefresher(){ this.setData({ bool:true //開啟下拉重繪 }) 在呼叫介面后關閉下拉重繪，設定為false } })
3、swiper、swiper-item
1、作用：滑塊視圖容器，其中只可放置swiper-item組件，否則會導致未定義的行為，常用于輪播圖效果
2、常用屬性：
eg：<swiper indicator-dots="true" autoplay="true" interval=1000 duration=100>
<swiper-item>
<image src="" />
</swiper-item>
</swiper>
4、movable-area、movable-view
1、作用：movable-view的可移動區域，可移動的視圖容器，在頁面中可以拖拽滑動，movable-view必須在 movable-area 組件中，并且必須是直接子節點，否則不能移動，
2、常用屬性：
movabal-view屬性
3、eg：<movable-area>
<movable-view direction="all"></movable-view>
</movable-area>
5、cover-view
1、作用：覆寫在原生組件之上的文本視圖，可覆寫的原生組件包括 map、video、canvas、camera、live-player、live-pusher，其他組件使用時會被原生組件所覆寫
只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button，組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)，
2、問題：
1、cover-view是覆寫在原生組件之上的文本視圖，只支持嵌套cover-view、cover-image2、cover-view不支持text-decoration屬性設定
3、cover-view設定文本內容換行 white-space: normal;（注意flex布局時可能不起效果哦）
6、cover-image
1、作用：覆寫在原生組件之上的圖片視圖，可覆寫的原生組件同cover-view，支持嵌套在cover-view里，
2、常用屬性：
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/106796.html
標籤：其他