一、常用的視圖容器

1. cover-view

1.1 解釋：覆蓋在原生組件之上的文本視圖?？筛采w的原生組件包括 map、video、canvas、camera、live-player、live-pusher，只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button

2020/03/16南京

2. movable-area與movable-view

2.1 解釋：movable-area是movable-view的可移動(dòng)區(qū)域。movable-view是可移動(dòng)的視圖容器，在頁面中可以拖拽滑動(dòng)。必須在 movable-area組件中，并且必須是直接子節(jié)點(diǎn)，否則不能移動(dòng)。也就是說，一個(gè)是農(nóng)場（movable-area)，一個(gè)是農(nóng)場里的綿羊(movable-view)

2.2 用處: 設(shè)置一個(gè)視圖在它的區(qū)域內(nèi)移動(dòng)，比如我們的windows桌面，里面我們可以拖拽一些界面（我們的視圖），再比如蜘蛛紙牌，與之類似，沒深究過。

2.3 課上實(shí)驗(yàn)

(1) js數(shù)據(jù)文件

Page({
  data: {
    x: 0,
    y: 0,
    ismove:true
  },
  tap: function (e) {
    this.setData({
      x: 30,
      y: 30
    });
  },
  onChange: function (e) {
    console.log(e.detail)
    console.log(e)
  },
  onScale: function (e) {
    console.log(e.detail)
    console.log(e)
  },
})

(2) wxml界面文件

<view>
  <movable-area class="area1">
    <movable-view class="view1" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2" inertia="false" out-of-bounds="ture">
    <text style="color:white">移動(dòng)</text>
    </movable-view>
  </movable-area>
</view>

(3) wxss樣式文件

.area1{
  height: 800rpx;
  width: 500rpx;
  background-color: #27bbf5
}

.view1{
  height: 100rpx;
  width: 100rpx;
  background-color: rgb(46, 87, 221)
}

movable演示

2.4 提示：關(guān)于其他的一些屬性，要留意一下，特別注意前幾個(gè)屬性。其中有bindchange 函數(shù)要特別注意，一旦movable-view發(fā)生移動(dòng)就會(huì)觸發(fā)該函數(shù),就是你動(dòng)它也動(dòng)，你不動(dòng)它也不動(dòng)，但是out-of-bounds屬性為true(默認(rèn)false)時(shí)會(huì)出現(xiàn)你不動(dòng)了它還動(dòng)，動(dòng)幾下也就停了。詳見movbale-view的屬性https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html。

3. scroll-view
3.1 解釋：可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過 WXSS 設(shè)置 height。
3.2 用處：這個(gè)最常見，相當(dāng)于滾動(dòng)面板，上下滑動(dòng)，左右滑動(dòng)，只要打開手機(jī)就會(huì)用到

3.3 課上實(shí)驗(yàn)
（1）js數(shù)據(jù)文件

Page({

  data: {
  },

  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },

  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },

  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },

})

(2) wxml界面文件

<view class="page-section-spacing">
  <text>上下滑動(dòng)</text>
  <scroll-view scroll-y="true" style="height: 450rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
    <view class="scroll-view-item">第一個(gè)</view>
    <view class="scroll-view-item">第二個(gè)</view>
    <view class="scroll-view-item">第三個(gè)</view>
  </scroll-view>
</view>

<view class="page-section-spacing">
  <text>左右滑動(dòng)</text>
  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 600rpx">
    <view class="scroll-view-item_H demo-text-1">第一個(gè)</view>
    <view class="scroll-view-item_H demo-text-2">第二個(gè)</view>
    <view class="scroll-view-item_H demo-text-3">第三個(gè)</view>
  </scroll-view>
</view>

(3) wxss樣式表文件

.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  width: 600rpx;
  height: 300rpx;
  background-color: rgb(38, 197, 236);
  margin-top: 20rpx
}
.scroll-view-item_H{
  display: inline-block;
  width: 300rpx;
  height: 500rpx;
  background-color: rgb(55, 233, 1);
  margin-left: 20rpx
}

scroll演示

3.4 提示： 在一般開發(fā)過程中，這個(gè)樣式我們要首先考慮到，因?yàn)槭亲钔鈱拥牟季?，所以要?yōu)先考慮這個(gè)視圖容器

這些時(shí)我們今天上課的主要內(nèi)容，下面是要學(xué)的視圖容器，還有一點(diǎn)，這些小程序最好是自己認(rèn)真讀一遍，我沒有放在圖片式代碼，就是為了給大家省時(shí)間好去稍微研究一下代碼

4. swiper與swiper-item
4.1 解釋： 滑塊視圖容器。其中只可放置swiper-item（僅可放置在swiper組件中，寬高自動(dòng)設(shè)置為100%。
）組件，否則會(huì)導(dǎo)致未定義的行為。
4.2 用處：輪播的功能，常見的軟件內(nèi)的廣告輪播

4.3 課前
(1) js數(shù)據(jù)文件

Page({

  data: {
    background: [{ num: "1" }, { num: "2" }, { num: "3" },{ num: "4" }, { num: "5" },],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

(2) wxml界面文件

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{background}}" wx:key="*this">
    <swiper-item>
      <view class="swiper-{{item.num}}">
       <text class="text1">廣告招租啦</text> 
      </view>
    </swiper-item>
  </block>
</swiper>

<view>
  <view class="view1">
    提示點(diǎn) <switch checked="{{indicatorDots}}"                 bindchange="changeIndicatorDots" />
  </view>
  <view class="view1">
    自動(dòng)播放 <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  </view>
</view>

(3)wxss樣式文件

.swiper-1{
  background-color: rgb(85, 165, 231);
  height: 300rpx;
}
.swiper-2{
  background-color: rgb(70, 194, 80);
  height: 300rpx;
}
.swiper-3{
  background-color: rgb(218, 126, 210);
  height: 300rpx;
}

.swiper-4{
  background-color: rgb(106, 236, 245);
  height: 300rpx;
}
.swiper-5{
  background-color: rgb(255, 144, 80);
  height: 300rpx;
}

.view1{
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 0 20rpx
}

.text1{
  color:white;
  font-size: 40rpx;
  margin: 40rpx 0 0 0
}

swiper演示

4.4 提示：關(guān)于swiper的應(yīng)用最多的是輪播的功能，一般來說掌握基本的熟悉和方法就可以完成相映的功能

5. view
5.1 這是最簡單的視圖容器，是容器中的弟弟，但大多數(shù)的視圖都是由這個(gè)弟弟完成的，上面的大哥都有自己的本領(lǐng)，只要這里的特別注意它的排版就好了，關(guān)于樣式的講解，下回再說。

喜歡就贊一下吧

版權(quán)任意