위 챗 애플 릿 은 틱 톡 영상의 전체 화면 상하 전환 기능 의 실현 코드 를 모방 합 니 다.
WXML:
<view class="video_box">
<view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video_list" wx:for="{{video_list}}" data-index="{{index}}" wx:key="index" >
<text style="color:red;font-size:30px;display:block;">{{index}}</text>
<video custom-cache="{{false}}" src="{{item.video_src}}" vslide-gesture-in-fullscreen="{{false}}" direction = '{{0}}' enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}" object-fit="cover"></video>
</view>
</view>
WXSS:
.video_box{width: 100%;height: auto;position: fixed;top:0;bottom: 0;background-color: #000;}
.video_list{width: 100%;height: 100vh;position: relative;}
.video_list video{position: absolute;top:50%;margin-top:-30vw; width: 100%;height:56vw;padding: 0;}
Page({
/**
*
*/
data: {
video_list:[
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
{video_src:'https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
{video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
{video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
],
pageY:'', //
animation:'', //
up_stroke:false,// ture: ;false:
difference:'', //
windowHeight:'',//
},
/**
* --
*/
onLoad: function (options) {
// : 、
this.setData({
windowHeight:wx.getSystemInfoSync().windowHeight
})
},
//
touchStart(e){
//
this.setData({
pageY:e.touches[0].pageY,
})
},
//
touchMove(e){
let n = e.currentTarget.dataset.index; //
let difference = e.touches[0].pageY - this.data.pageY; //
if(this.is_continue(n,difference)){ //
return;
}
// -------------------------------------
var animation = wx.createAnimation({ //
duration: 0,
});
animation.top(difference - (n*this.data.windowHeight)).step()
this.setData({
animation: animation.export(), //
up_stroke:difference > 0 ? false : true, // ,
difference:difference, //
})
},
//
touchEnd(e){
let n = e.currentTarget.dataset.index;
let difference = this.data.difference; //
if(this.is_continue(n,difference)){
return;
}
const windowHeight = this.data.windowHeight; //
let that = this;
// id
var query = wx.createSelectorQuery();
let id = '#' + e.currentTarget.id;
query.select(id).boundingClientRect(function (rect) { //
if(Math.abs(difference) <= windowHeight /7){ // 1/7 ---------------------------
var animation = wx.createAnimation({ //
duration: 100,
});
animation.top(-(n * windowHeight)).step()
that.setData({
animation: animation.export(),
up_stroke:false, //
difference:0, //
})
}else{ // 1/4, --------------------------------
var animation = wx.createAnimation({ //
duration: 200,
});
that.data.up_stroke ? n++ : n--; // :n+1 :n-1
animation.top(-(n * windowHeight)).step()
that.setData({
animation: animation.export(),
up_stroke:false, //
difference:0, //
})
}
}).exec();
},
//
is_continue(n,difference){
if(difference < 0){ //
if(n == this.data.video_list.length - 1){ // ,
if(difference < -20){
wx.showToast({
title: ' ~~',
icon:'none',
duration:1000
})
}
return true;
}
}else{
if(n == 0){
if(difference > 20){
wx.showToast({
title: ' ~~',
icon:'none',
duration:1000
})
}
return true;
}
}
},
})
총결산위 챗 애플 릿 이 틱 톡 동 영상 을 모방 한 전체 화면 상하 전환 기능 의 실현 코드 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 위 챗 애플 릿 틱 톡 동 영상 전체 화면 전환 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.