不朽的情缘免费旋转藤蔓大奖

書名：微信小程序項目開發實戰：用WePY、mpvue、Taro打造高效的小程序
作者名：張帆
本章字數： 1705字
更新時間： 2019-09-23 11:07:54

2.1 小程序的視圖容器

視圖容器作為小程序最常見的組件之一，如Web開發中的＜div＞＜/div＞一樣常用，或者說，＜view＞＜/view＞就和基礎的＜div＞＜/div＞效果一樣。而使用不同視圖容器，可以讓開發者迅速開發出不同的視圖效果。

因篇幅有限，本書并沒有羅列出所有組件的每一種屬性。本書的目的是告訴讀者組件的基本用法和常見應用場景并給出實例，未對所有組件的每個屬性進行詳細解析。微信官方的文檔提供了非常好的教學內容、相關實例和更好的查閱方式。當讀者需要實現某種功能并且確定使用的組件時，可以在微信公眾平臺的小程序文檔中非常快地查閱和學習。

2.1.1 最基礎的組件：view

view是最基礎的視圖組件，相當于HTML中的＜div＞＜/div＞組件，但和網頁開發不同的是，小程序的開發并不推薦大量使用該標簽。作為一個崇尚性能和精簡的輕量程序，大量嵌套使用view標簽，可能導致小程序性能降低。

view組件最常見的用法如下所示。

＜view style="font-size:20rpx;color:#ababab"＞
這是view組件
＜/view＞

上述代碼實現了一個最簡單的＜view＞＜/view＞標簽，并且在該標簽中顯示了一些文字。在該標簽上進行了簡單的文字樣式設定，包括設定字體大小和字體顏色。小程序的所有標簽還支持定義class的樣式。

注意：這里的rpx是小程序中特有的單位，該單位會隨著客戶端手機分辨率的不同而進行自主的調節，推薦所有的字體單位都使用rpx。

2.1.2 可滾動視圖區域：scroll-view

可滾動視圖區域并不常見，最大的一個應用應該是實現整頁的滾動視圖。通過scroll-view組件，可以實現一個單頁面的切換，以實現view組件不容易實現的頁面輪播或其他應用。

2.1.3 輪播圖片：swiper

swiper是用于實現輪播圖片的一個自帶組件，只需要簡單地進行圖片的配置，以及切換動畫、時間、位置等的配置。

swiper的結構如下所示。

＜swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"＞
  ＜block wx:for="{{imgUrls}}"＞
    ＜swiper-item＞
      ＜image src="{{item}}" class="slide-image" width="355" height="150"/＞
    ＜/swiper-item＞
  ＜/block＞
＜/swiper＞
Page（{
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'，
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'，
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ]，
    indicatorDots: false，
    autoplay: false，
    interval: 5000，
    duration: 1000
  }，
}]

在＜swiper＞標簽中，每一張圖片和內容需要使用一個＜swiper-item＞進行包裹，當有多個節點時，可以使用wx:for或者WePY中的＜repeat＞標簽進行循環顯示。

2.1.4 可移動視圖容器：movable-view

movable-view組件用于完成一些特殊樣式的視圖容器，可以在頁面中實現拖曳滑動，并且可以控制滑動的方向，甚至提供滑動時的慣性、阻尼、摩擦等。

movable-view組件提供了兩個特殊事件，如表2-1所示。

表2-1 movable-view組件提供了兩個特殊事件

注意：movable-view必須設置width和height屬性，默認為10px。movable-view默認為絕對定位，top和left屬性為0px。movable-view必須位于＜movable-area/＞組件中，并且必須是直接子節點，否則不能移動。

在movable-view中需要移動的區域使用movable-area標簽進行包裹。該組件可以組合放置在需要拖動的場景中，比如在某些更換頭像或者生成背景的小程序中，原本使用Canvas才可以實現的效果。通過該組件可以減少資源的使用。

當然，這類組件也可用于實現類似于安卓中的抽屜，或左右滑動刪除、切換的操作。

movable-view基本的使用方法如下所示。

＜view＞移動視圖控件＜/view＞
＜!-- 創建一個move-area --＞
＜movable-area style="width:100%;height:1000rpx;background:gray;"＞
  ＜!-- 可以移動view黃色、寬高100rpx--＞
  ＜movable-view style='background:yellow;width:100rpx;height:100rpx;' direction=
"all"＞
  ＜/movable-view＞
  ＜!-- 可以移動view紅色、寬高100rpx--＞
  ＜movable-view style='background:red;width:100rpx;height:100rpx;' direction=
"all" bindtap='redclcik' bindtouchmove='redmove'＞
  ＜/movable-view＞
＜/movable-area＞
redclcik:function（sender）{
    wx.showModal（{
      title: '單擊紅色'，
      content: ''，
    }）
    console.log（sender）;
  }，
  redmove:function（sender）{
    console.log（sender）;
    // console.log（sender.changedTouches[0].pageX）;

  }，

2.1.5 超過原生組件的層級：cover-view和cover-image

使用過Canvas、map、video等原生組件的開發者都知道，在小程序中，原生組件的層級是直接覆蓋于所有的組件之上的，即不受z-index屬性的影響。這樣雖然保證了原生組件的效果，但是極大影響了一些業務的展開。為了解決這個問題，小程序為我們提供了新的組件。

cover-view和cover-image是覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。

注意：從基礎庫2.2.4起支持touch相關事件，從基礎庫2.1.0起支持設置scale rotate的css樣式，在自定義組件嵌套cover-view時，自定義組件的slot及其父節點暫不支持通過wx:if控制顯示和隱藏，否則會導致cover-view不顯示。

雖然并不是非常完善的功能，但是對于一些需要覆蓋在原生組件上的業務場景，已經完全足夠了，其使用方法如下所示。

.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play，.pause，.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba（0，0，0，.5）;
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}
＜video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/
snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b124
1b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c0201010425302
30204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
controls="{{false}}" event-model="bubble"＞
  ＜cover-view class="controls"＞
    ＜cover-view class="play" bindtap="play"＞
      ＜cover-image class="img" src="/path/to/icon_play" /＞
    ＜/cover-view＞
    ＜cover-view class="pause" bindtap="pause"＞
      ＜cover-image class="img" src="/path/to/icon_pause" /＞
    ＜/cover-view＞
    ＜cover-view class="time"＞00:00＜/cover-view＞
  ＜/cover-view＞
＜/video＞
Page（{
  onReady（）{
    this.videoCtx = wx.createVideoContext（'myVideo'）
  }，
  play（）{
    this.videoCtx.play（）
  }，
  pause（）{
    this.videoCtx.pause（）
  }
}）

具體的實例可以參照2.3.4節使用的cover-view效果。

官术网_书友最值得收藏!