小程序3

今天学习了小程序的组件，测试效果挺顺利的。下图是在手机上的效果图，性能数据那块灰色可以忽略。

三个代码文件也贴上
component.js

Page({
  data: {
     /* 轮播图 数据 */
    imgUrls: [
      '../images/banner1.jpg',
      '../images/banner2.jpg',
      '../images/banner3.jpg',
      '../images/banner4.jpg',
      '../images/banner5.jpg'
    ],
    indicatorDots: true, // 是否显示轮播图下面的圆点
    autoplay: true, // 轮播图是否自动播放
    interval: 3000, // 自动切换时间间隔
    duration: 1000, // 滑动时长

    /* 拖动效果 数据 */
    x: 5,
    y: 5,

     /* 覆盖效果 数据 */
    isplaying: true,

    /* 小程序图标 数据 */
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  },
  
  // 进度条的形式改变interval的值
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },

  // 视频在页面加载时就需要创建
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  //点击切换暂停播放
  playorpause() {    
    if (this.data.isplaying) { //是播放中就调用暂停，是暂停就调用播放    
      this.pause(); // page里面调用函数要使用this关键词
    } else {      
      this.play();
    }
    //暂停或者播放后，值需要改反一下
    this.setData({
      isplaying: !this.data.isplaying
    })    
  },
  play() { //播放视频  
    this.videoCtx.play()
  },
  pause() { // 暂停视频    
    this.videoCtx.pause()
  }
})

component.wxss

/* pages/component/component.wxss */
.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}

.mvarea{
  height: 200px;
  width: 200px;
  background: black;
}
.mvview{
  height: 50px; 
  width: 50px; 
  background: white;
}


.play,.pause,.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, .2); /* 可以控制背景颜色透明度 */
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

component.wxhl

<!-- swiper是滑动标签，比如轮播图。进度条等应用 -->
<view class="bold">轮播图效果</view>
<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>


<text>\n</text>
<view class="bold">进度条效果</view>
<view>自动切换时间间隔调整</view>
<!-- bindchange会返回一个detail参数到后台，后台接收获取detail里面的数据 -->
<slider bindchange="intervalChange" show-value min="500" max="2000"/> 
<!-- show-info表示右侧显示百分比，stroke-width设置线条宽度，color设置线条颜色，active线条是否有动态增长效果 -->
<progress percent="20" show-info stroke-width="10" color="red" active/>

<text>\n</text>
<view class="bold">拖动效果</view>
<view class="section">
  <view class="section_title">白色小块可以在黑色区域拖动</view>
  <movable-area class='mvarea'>
  <!-- movable-view必须被movable-area包裹，x和y的值表示白块的初始位置（原点是左上角），direction表示移动方向（all任意移动，vertical垂直，horizontal水平，none不能） -->
    <movable-view class='mvview' x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>  
</view>


<text>\n</text>
<view class="bold">覆盖效果：视频上打水印</view>
<video id="myVideo" autoplay='true' src="../videos/v.mp4" controls="{{false}}" event-model="bubble">
  <cover-view class="controls">
    <!-- 用一个图标覆盖在视频上,也可以做马赛克作用 -->
    <cover-view class="play" bindtap="playorpause">
      <cover-image class="img" src="{{isplaying?'../images/play.png':'../images/pause.jpg'}}" />
    </cover-view>    
    <!-- 纯文本覆盖在视频上，类似水印效果 -->
    <cover-view class="time">CCTV频道</cover-view>
  </cover-view>
</video>


<text>\n\n</text>
<view class="bold">小程序图标</view>
<view>图标的类型有以下一些，图标的大小和颜色通过icon标签里面的size和color控制</view>
<view>
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>

标签属性说明表，常用的属性已加粗显示
1、轮播图swiper标签

属性名	类型	默认值	说明
indicator-dots	Boolean	FALSE	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	FALSE	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	FALSE	是否采用衔接滑动
vertical	Boolean	FALSE	滑动方向是否为纵向
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}

2、图标icon标签

属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，单位px
color	Color		icon的颜色

3、进度条progress标签

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	FALSE	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	FALSE	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播

4、拖动movable-area标签

属性名	类型	默认值	说明
direction	String	none	movable-view的移动方向，属性值有all(任意)、vertical(仅可垂直移)、horizontal(仅可水平移)、none(不可移)
inertia	Boolean	FALSE	movable-view是否带有惯性
out-of-bounds	Boolean	FALSE	超过可移动区域后，movable-view是否还可以移动
x	Number		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值

movable-area和movable-view标签若没设置width和height属性则默认为10px
cover-view可覆盖在map、video、canvas上，cover-view可以嵌套在cover-view里，这样嵌套是考虑样式布局稳定。