一、常用的视图容器

1. cover-view

1.1 解释：覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher，只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button

1.2 用处：比如我们用的高德地图，在这样的地图上我们标识了两个按钮，这个按钮就是我们在map上嵌入的视图容器；像我们的爱奇艺、腾讯视频在播放时，在视频上方的按钮都属于这样的视图容器。

2020/03/16南京

2. movable-area与movable-view

2.1 解释：movable-area是movable-view的可移动区域。movable-view是可移动的视图容器，在页面中可以拖拽滑动。必须在 movable-area组件中，并且必须是直接子节点，否则不能移动。也就是说，一个是农场（movable-area)，一个是农场里的绵羊(movable-view)

2.2 用处: 设置一个视图在它的区域内移动，比如我们的windows桌面，里面我们可以拖拽一些界面（我们的视图），再比如蜘蛛纸牌，与之类似，没深究过。

2.3 课上实验

(1) js数据文件

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">移动</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 提示：关于其他的一些属性，要留意一下，特别注意前几个属性。其中有bindchange 函数要特别注意，一旦movable-view发生移动就会触发该函数,就是你动它也动，你不动它也不动，但是out-of-bounds属性为true(默认false)时会出现你不动了它还动，动几下也就停了。详见movbale-view的属性https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html。

3. scroll-view
3.1 解释：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
3.2 用处：这个最常见，相当于滚动面板，上下滑动，左右滑动，只要打开手机就会用到

3.3 课上实验
（1）js数据文件

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>上下滑动</text>
  <scroll-view scroll-y="true" style="height: 450rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
    <view class="scroll-view-item">第一个</view>
    <view class="scroll-view-item">第二个</view>
    <view class="scroll-view-item">第三个</view>
  </scroll-view>
</view>

<view class="page-section-spacing">
  <text>左右滑动</text>
  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 600rpx">
    <view class="scroll-view-item_H demo-text-1">第一个</view>
    <view class="scroll-view-item_H demo-text-2">第二个</view>
    <view class="scroll-view-item_H demo-text-3">第三个</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 提示：在一般开发过程中，这个样式我们要首先考虑到，因为是最外层的布局，所以要优先考虑这个视图容器

这些时我们今天上课的主要内容，下面是要学的视图容器，还有一点，这些小程序最好是自己认真读一遍，我没有放在图片式代码，就是为了给大家省时间好去稍微研究一下代码

4. swiper与swiper-item
4.1 解释：滑块视图容器。其中只可放置swiper-item（仅可放置在swiper组件中，宽高自动设置为100%。
）组件，否则会导致未定义的行为。
4.2 用处：轮播的功能，常见的软件内的广告轮播

4.3 课前
(1) js数据文件

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">
    提示点 <switch checked="{{indicatorDots}}"                 bindchange="changeIndicatorDots" />
  </view>
  <view class="view1">
    自动播放 <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
}