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();
},