模仿网易云微信小程序

1.个人中心动画

点击图片下面会有一个回弹的效果
类型 触发条件

touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longtap	手指触摸后，超过350ms再离开

let startY=0; //手指开始的位置
let moveY=0; //手指移动的坐标
let moveDistance=0;  //手指移动的距离
data：{
    coverTransform:'translateY(0)',
    coveTransition:''
}

handleTouchStart(event){
    startY=event.touches[0].clientY; //获取第一个手指的起始坐标
    this.setData({
      coverTransform:'translateY(0)',
    })
  },
  handleTouchMove(event){
    moveY=event.touches[0].clientY;
    moveDistance= moveY-startY;
    if(moveDistance<=0){
      return
    }
    if(moveDistance>80){
      moveDistance=80
    }
    this.setData({
      coverTransform:`translateY(${moveDistance}rpx)`
    })
  },
  handleTouchEnd(){
    this.setData({
      coverTransform:'translateY(0)',
      coveTransition:'transform 1s linear'
    })
  }

2.微信小程序使用视频

<scroll-view scroll-y="true" style="width: 100%;" class='nav_list'>
		<view class="video_list" wx:for='{{List}}' wx:key='index'>
			<video id="myVideo" src="{{item.data.userInfo.url }}"></video>
		</view>
	</scroll-view>

解决多个视频同时播放问题

  问题： 多个视频同时播放的问题
* 需求：
*   1. 在点击播放的事件中需要找到上一个播放的视频
*   2. 在播放新的视频之前关闭上一个正在播放的视频
* 关键：
*   1. 如何找到上一个视频的实例对象
*   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
* 单例模式：
*   1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象，
*   2. 节省内存空间

handlePlay(event){

* */    
let vid = event.currentTarget.id;

// 更新data中videoId的状态数据
this.setData({
  videoId: vid
})
// 创建控制video标签的实例对象
this.videoContext = wx.createVideoContext(vid);
// 判断当前的视频之前是否播放过，是否有播放记录, 如果有，跳转至指定的播放位置
let {videoUpdateTime} = this.data;
let videoItem = videoUpdateTime.find(item => item.vid === vid);
if(videoItem){
  this.videoContext.seek(videoItem.currentTime);
}
this.videoContext.play();
// this.videoContext.stop();

},

同一页面存在多个video时，video无法正常播放一直在加载转圈