可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

bindchange 返回的 source 表示产生移动的原因

Bug & Tip

1. tip: movable-view 必须设置width和height属性，不设置默认为10px
2. tip: movable-view 默认为绝对定位，top和left属性为0px

<view class="section">

  <view class="section__title">movable-view区域小于movable-area</view>

  <movable-area style="height: 200px; width: 200px; background: red;">

    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">

    </movable-view>

  </movable-area>

  <view class="btn-area">

    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>

  </view>

  <view class="section__title">movable-view区域大于movable-area</view>

  <movable-area style="height: 100px; width: 100px; background: red;">

    <movable-view style="height: 200px; width: 200px; background: blue;" direction="all">

    </movable-view>

  </movable-area>

  <view class="section__title">可放缩</view>

  <movable-area style="height: 200px; width: 200px; background: red;" scale-area>

    <movable-view style="height: 50px; width: 50px; background: blue;" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="" scale-value="">

    </movable-view>

  </movable-area>

</view>

Page({

  data: {

    x: ,

    y:

  },

  tap: function(e) {

    this.setData({

      x: ,

      y:

    });

  },

  onChange: function(e) {

    console.log(e.detail)

  },

  onScale: function(e) {

    console.log(e.detail)

  }

}) 

<!--垂直滚动，这里必须设置高度-->

<scroll-view scroll-y="true" style="height: 200px">

    <view style="background: red; width: 100px; height: 100px" ></view>

    <view style="background: green; width: 100px; height: 100px"></view>

    <view style="background: blue; width: 100px; height: 100px"></view>

    <view style="background: yellow; width: 100px; height: 100px"></view>

</scroll-view>

<!--  white-space

  normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)

  pre: 保持HTML源代码的空格与换行,等同与pre标签

  nowrap: 强制文本在一行,除非遇到br换行标签

  pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行

  pre-line: 同pre属性,但是遇到连续空格会被看作一个空格

  inherit: 继承

-->

<!--水平滚动-->

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >

<!--  display: inline-block-->

  <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>

  <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>

  <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>

  <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>

</scroll-view>

<swiper indicator-dots="{{indicatorDots}}"

  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

  <block wx:for="{{imgUrls}}">

    <swiper-item>

      <image src="{{item}}" class="slide-image" width="" height=""/>

    </swiper-item>

  </block>

</swiper>

<button bindtap="changeIndicatorDots"> indicator-dots </button>

<button bindtap="changeAutoplay"> autoplay </button>

<slider bindchange="intervalChange" show-value min="" max=""/>

<slider bindchange="durationChange" show-value min="" max=""/>

Page({

  data: {

    imgUrls: [

      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',

      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',

      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'

    ],

    indicatorDots: false,

    autoplay: false,

    interval: ,

    duration:

  },

  changeIndicatorDots: function(e) {

    this.setData({

      indicatorDots: !this.data.indicatorDots

    })

  },

  changeAutoplay: function(e) {

    this.setData({

      autoplay: !this.data.autoplay

    })

  },

  intervalChange: function(e) {

    this.setData({

      interval: e.detail.value

    })

  },

  durationChange: function(e) {

    this.setData({

      duration: e.detail.value

    })

  }

})

<view class="section">

  <view class="section__title">flex-direction: row</view>

  <view class="flex-wrp" style="flex-direction:row;">

    <view class="flex-item bc_green"></view>

    <view class="flex-item bc_red"></view>

    <view class="flex-item bc_blue"></view>

  </view>

</view>

<view class="section">

  <view class="section__title">flex-direction: column</view>

  <view class="flex-wrp" style="height: 300px;flex-direction:column;">

    <view class="flex-item bc_green"></view>

    <view class="flex-item bc_red"></view>

    <view class="flex-item bc_blue"></view>

  </view>

</view>

<view class="group">

  <block wx:for="{{iconSize}}">

    <icon type="success" size="{{item}}"/>

  </block>

</view>

<view class="group">

  <block wx:for="{{iconType}}">

    <icon type="{{item}}" size=""/>

  </block>

</view>

<view class="group">

  <block wx:for="{{iconColor}}">

    <icon type="success" size="" color="{{item}}"/>

  </block>

</view>

Page({

  data: {

    iconSize: [, , , , , ],

    iconColor: [

      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

    ],

    iconType: [

      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

    ]

  }

})

<progress percent="" show-info />

<progress percent="" stroke-width="" />

<progress percent="" color="pink" />

<progress percent="" active show-info/>

<checkbox-group bindchange="checkboxChange">

  <label class="checkbox" wx:for="{{items}}">

    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}

  </label>

</checkbox-group>

Page({

  data: {

    items: [

      {name: 'USA', value: '美国'},

      {name: 'CHN', value: '中国', checked: 'true'},

      {name: 'BRA', value: '巴西'},

      {name: 'JPN', value: '日本'},

      {name: 'ENG', value: '英国'},

      {name: 'TUR', value: '法国'},

    ]

  },

  checkboxChange: function(e) {

    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

  }

})

<view class="body-view">

    <switch checked bindchange="switch1Change"/>

    <switch bindchange="switch2Change"/>

</view>

Page({

  switch1Change: function (e){

    console.log('switch1 发生 change 事件，携带值为', e.detail.value)

  },

  switch2Change: function (e){

    console.log('switch2 发生 change 事件，携带值为', e.detail.value)

  }

})

<view class="btn-area">

  <navigator url="/pages/navigator/navigator" hover-class="navigator-hover">跳转到新页面</navigator>

  <navigator url="/pages/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

  <navigator url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>

</view>

Page({

  onLoad: function(options) {

    this.setData({

      title: options.title

    })

  }

})

<!-- audio.wxml -->

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>

<button type="primary" bindtap="audioPause">暂停</button>

<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>

<button type="primary" bindtap="audioStart">回到开头</button>

// audio.js

Page({

  onReady: function (e) {

    // 使用 wx.createAudioContext 获取 audio 上下文 context

    this.audioCtx = wx.createAudioContext('myAudio')

  },

  data: {

    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

    name: '此时此刻',

    author: '许巍',

    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

  },

  audioPlay: function () {

    this.audioCtx.play()

  },

  audioPause: function () {

    this.audioCtx.pause()

  },

  audio14: function () {

    this.audioCtx.seek()

  },

  audioStart: function () {

    this.audioCtx.seek()

  }

})

<!-- camera.wxml -->

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>

<button type="primary" bindtap="takePhoto">拍照</button>

<view>预览</view>

<image mode="widthFix" src="{{src}}"></image>

// camera.js

Page({

  takePhoto() {

    const ctx = wx.createCameraContext()

    ctx.takePhoto({

      quality: 'high',

      success: (res) => {

        this.setData({

          src: res.tempImagePath

        })

      }

    })

  },

  error(e) {

    console.log(e.detail)

  }

})

<view class="page">

  <view class="page__hd">

    <text class="page__title">image</text>

    <text class="page__desc">图片</text>

  </view>

  <view class="page__bd">

    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">

      <view class="section__title">{{item.text}}</view>

      <view class="section__ctn">

        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>

      </view>

    </view>

  </view>

</view>

Page({

  data: {

    array: [{

      mode: 'scaleToFill',

      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'

    }, {

      mode: 'aspectFit',

      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'

    }, {

      mode: 'aspectFill',

      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'

    }, {

      mode: 'top',

      text: 'top：不缩放图片，只显示图片的顶部区域'

    }, {

      mode: 'bottom',

      text: 'bottom：不缩放图片，只显示图片的底部区域'

    }, {

      mode: 'center',

      text: 'center：不缩放图片，只显示图片的中间区域'

    }, {

      mode: 'left',

      text: 'left：不缩放图片，只显示图片的左边区域'

    }, {

      mode: 'right',

      text: 'right：不缩放图片，只显示图片的右边边区域'

    }, {

      mode: 'top left',

      text: 'top left：不缩放图片，只显示图片的左上边区域'

    }, {

      mode: 'top right',

      text: 'top right：不缩放图片，只显示图片的右上边区域'

    }, {

      mode: 'bottom left',

      text: 'bottom left：不缩放图片，只显示图片的左下边区域'

    }, {

      mode: 'bottom right',

      text: 'bottom right：不缩放图片，只显示图片的右下边区域'

    }],

    src: '../resources/cat.jpg'

  },

  imageError: function(e) {

    console.log('image3发生error事件，携带值为', e.detail.errMsg)

  }

})

<view class="section tc">

  <video src="{{src}}"   controls ></video>

  <view class="btn-area">

    <button bindtap="bindButtonTap">获取视频</button>

  </view>

</view>

<view class="section tc">

  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>

  <view class="btn-area">

    <button bindtap="bindButtonTap">获取视频</button>

    <input bindblur="bindInputBlur"/>

    <button bindtap="bindSendDanmu">发送弹幕</button>

  </view>

</view>

function getRandomColor () {

  let rgb = []

  for (let i =  ; i < ; ++i){

    let color = Math.floor(Math.random() * ).toString()

    color = color.length ==  ? '' + color : color

    rgb.push(color)

  }

  return '#' + rgb.join('')

}

Page({

  onReady: function (res) {

    this.videoContext = wx.createVideoContext('myVideo')

  },

  inputValue: '',

  data: {

    src: '',

    danmuList: [

      {

        text: '第 1s 出现的弹幕',

        color: '#ff0000',

        time:

      },

      {

        text: '第 3s 出现的弹幕',

        color: '#ff00ff',

        time:

    }]

  },

  bindInputBlur: function(e) {

    this.inputValue = e.detail.value

  },

  bindButtonTap: function() {

    var that = this

    wx.chooseVideo({

      sourceType: ['album', 'camera'],

      maxDuration: ,

      camera: ['front','back'],

      success: function(res) {

        that.setData({

          src: res.tempFilePath

        })

      }

    })

  },

  bindSendDanmu: function () {

    this.videoContext.sendDanmu({

      text: this.inputValue,

      color: getRandomColor()

    })

  }

})