wxml
<view class="detail-container" >
<view class="det-inner" >
<swiper class="inner-swiper" interval="3000" duration="500" vertical="true" bindanimationfinish="changeWofan" current="{{nowIndex}}">
<block wx:key="list" wx:for="{{videoList}}">
<swiper-item class="swiper-only">
<view class="only-box" wx:if="{{nowIndex>index-3}}">
<view class="only-b-back">
<view class="back-v">
<view class="back-v-pic wh flexca">
<image mode="aspectFill" class="wh" src="{{item.videoLogo}}"></image>
</view>
<video id="myVideo{{item.id}}" style="{{nowIndex==index?'':'opacity:0'}}" initial-time="{{0}}" class="back-v-start" src="{{item.videoUrl}}" controls="{{false}}" show-play-btn="{{false}}" show-fullscreen-btn="{{false}}" loop="{{false}}" show-center-play-btn="{{false}}" bindended="endVideoFn" ></video>
</view>
<view class="back-v-zhe flexca" catchtap="startStopBtn">
<view class="zhe-start-btn" wx:if="{{!videoStart&&index==nowIndex}}">
<image mode="aspectFill" class="wh" src="../../resources/pic/school_detail_star.png"></image>
</view>
</view>
</view>
<view class="only-b-btm flexa" wx:if="{{index==nowIndex}}">
<view class="b-btm-per">
<image wx:if="{{item.isSelf==1}}" mode="aspectFill" class="wh" src="../../../../image/home/zj_xnjz_logo.png"></image>
<image wx:if="{{item.isSelf==0}}" mode="aspectFill" class="wh" src="{{item.logo}}"></image>
</view>
<view class="b-btm-text corfff ml20">
<view class="f32" wx:if="{{item.isSelf==1}}" style="line-height:32rpx;">小鸟家装{{nowIndex+3>index}}</view>
<view class="f32" wx:else style="line-height:32rpx;">{{item.designerUserName}}</view>
<view class="f24 mt15" style="line-height:24rpx;">{{item.brownNum}}次播放</view>
</view>
<view class="b-btm-btn bgc2z corfff f24" catchtap="backHome">查看设计师</view>
</view>
<view class="only-b-rt" wx:if="{{index==nowIndex}}">
<view class="b-rt-pic flexca">
<button class="b-rt-pic-btn wh" open-type="share">
<image mode="aspectFill" class="wh" src="../../resources/pic/school_detail_share.png"></image>
</button>
</view>
<view class="b-rt-text tc">分享</view>
</view>
<view class="only-b-before" wx:if="{{endVideo&&index==nowIndex}}">
<view class="b-before-in">
<view class="before-in-top flexb">
<view class="in-top-tem" catchtap="play">
<view class="top-tem-box">
<image class="wh" src="../../resources/pic/school_detail_restart.png"></image>
</view>
<view class="tem-box-text corfff f32">
<view class="tc box-text-t">重播</view>
</view>
</view>
<view class="in-top-tem">
<view class="top-tem-box">
<button class="b-rt-pic-btn wh" open-type="share">
<image class="wh" src="../../resources/pic/school_detail_bieshare.png"></image>
</button>
</view>
<view class="tem-box-text corfff f32">
<view class="tc box-text-t">分享给好友</view>
</view>
</view>
</view>
<view class="before-in-dwon">
<view class="dwon-pic">
<image class="wh" src="../../resources/pic/school_detail_up.png"></image>
</view>
<view class="f26 corfff tc mt5">上滑查看更多</view>
</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<view class="det-back corfff flexa" wx:if="{{!cheuid}}" catchtap="backFn">
<view class="det-back-lf">
<image class="wh" src="../../../../image/flow/flow_rt.png"></image>
</view>
</view>
<view class="det-end tc pb10" wx:if="{{nowIndex==(videoList.length-1)}}">
<text class="cor9 f26">没有更多数据了</text>
</view>
<view class="det-start tc pt50" wx:if="{{nowIndex==0}}">
<text class="cor9 f26">已经到顶了</text>
</view>
</view>
</view>
wxss
page {
width: 100%;
height: 100%;
background-color: #000
}
.detail-container {
width: 100%;
height: 100%;
}
.det-back{
width: 20%;
position: absolute;
left: 0;
top: 0;
padding: 24rpx;
padding-top: 35px;
z-index: 20;
}
.det-back-lf{
width: 20rpx;
height: 38rpx;
transform: rotateY(180deg);
}
.det-inner {
width: 100%;
height: 100%;
position: relative;
}
.inner-swiper {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.swiper-only {
position: relative;
}
.only-box {
width: 100%;
height: 100%;
position: relative;
}
.only-b-back {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.back-v{
width: 100%;
height: 100%;
overflow: hidden;
}
.back-v-start{
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.back-v-pic{
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.back-v-zhe{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.zhe-start-btn{
width: 100rpx;
height: 100rpx;
animation: danru 1s ease;
}
@keyframes danru {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.only-b-btm{
position: absolute;
left: 24rpx;
bottom: 100rpx;
z-index: 10;
}
.b-btm-per{
width: 100rpx;
height: 100rpx;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
}
.b-btm-btn{
width: 165rpx;
height: 70rpx;
border-radius: 5rpx;
margin-left: 45rpx;
text-align: center;
line-height: 70rpx;
}
.only-b-rt{
width: 90rpx;
height: 90rpx;
position: absolute;
right: 24rpx;
bottom: 450rpx;
z-index: 10;
overflow: visible;
}
.b-rt-pic{
width: 100%;
height: 100%;
border-radius: 50%;
}
.b-rt-text{
width: 100%;
color: #fff;
font-size: 30rpx;
position: absolute;
top: 100%;
left: 0;
padding-top: 10rpx;
}
.b-rt-pic-btn{
background-color: transparent;
border: 1px solid transparent;
padding: 0;
overflow: hidden;
}
.b-rt-pic-btn:after {
border: 0;
}
.only-b-before{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 15;
background-color: rgba(0,0,0,0.7);
}
.b-before-in{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
padding-bottom: 330rpx;
}
.before-in-top{
width: 375rpx;
margin: 0 auto;
}
.in-top-tem{
width: 100rpx;
position: relative;
}
.top-tem-box{
width: 100rpx;
height: 100rpx;
}
.tem-box-text{
width: 100%;
position: absolute;
left: 0;
top: 100%;
}
.box-text-t{
padding-top: 20rpx;
width: 200rpx;
position: relative;
transform: translateX(-25%);
}
.before-in-dwon{
width: 375rpx;
margin: 0 auto;
margin-top: 110rpx;
}
.dwon-pic{
width: 45rpx;
height: 45rpx;
margin: 0 auto;
}
.det-end{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 0;
}
.det-start{
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
js
const FZ = require('../../../../util/util.js');
const Upj = require('../../../../util/user.js');
// const videoList = urls.map((url, index) => ({ id: index + 1, url }))
Page({
/**
* 页面的初始数据
*/
data: {
videoList: [],
nowIndex: 0,
videoStart: true,
endVideo: false,
pageNo: 2,
chetype: '',
checolumid: '',
cheuid: '',
cheVideoid: 0, //dom 的id
},
backFn: function() {
wx.navigateBack({
delta: 1
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(opt) {
let that = this;
let cheuid = '';
let jsonParam = JSON.parse(decodeURIComponent(opt.jsonParam));
let user = wx.getStorageSync('user');
console.log(opt)
console.log(jsonParam)
let chenowIndex = 0;
if (opt.index) {
chenowIndex = opt.index;
}
if (opt.cheuid) {
cheuid = opt.cheuid;
}
console.log(chenowIndex)
console.log(cheuid)
// this.setData({ videoList: [jsonParam] })
let videoList = jsonParam;
for (let i = 0; i < videoList.length;i++){
videoList[i].url = videoList[i].videoUrl;
}
console.log(videoList)
this.setData({
cheuid,
videoList,
nowIndex: chenowIndex,
pageNo: (jsonParam[jsonParam.length - 1].page + 1),
chetype: opt.type,
checolumid: opt.columid
})
if (!user) {
that.startLogin();
}
if (user) {
if (chenowIndex > (jsonParam.length - 2)) {
this.nexVideoList()
}
this.detailFn();
}
},
backHome: function() {
wx.switchTab({
url: '/page/tabBar/home/index'
})
},
onReady() {
let videoList = this.data.videoList;
let nowIndex = this.data.nowIndex;
this.videoCtx = wx.createVideoContext('myVideo' + videoList[nowIndex].id)
console.log(videoList)
this.videoCtx.play()
},
startStopBtn() {
let videoStart = this.data.videoStart;
if (videoStart) {
this.pause()
} else {
this.play()
}
},
play() {
console.log(1)
this.videoCtx.play()
this.setData({
videoStart: true,
endVideo: false
})
},
detailFn() {
let that = this;
let nowIndex = this.data.nowIndex;
let videoList = this.data.videoList;
let user = wx.getStorageSync('user');
if (!user){return}
let datVal = {
userId: user.id,
contentId: videoList[nowIndex].id
}
console.log(datVal)
FZ._postJ3('column/v1/columncontentdetail', datVal).then(function(data) {
console.log(data)
let resoult = data.data;
if (resoult) {
} else {
if (data.message != "正常") {
wx.showToast({
icon: 'none',
title: data.message,
})
}
}
})
},
haveEndAddfn:function(e){
},
pause() {
console.log(2)
this.videoCtx.pause()
this.setData({
videoStart: false
})
},
changeWofan: function (e) {
console.log(e)
this.videoCtx.pause()
let videoList = this.data.videoList;
this.videoCtx = wx.createVideoContext('myVideo' + videoList[e.detail.current].id)
console.log(e.detail.current)
this.setData({
cheVideoid: videoList[e.detail.current].id,
endVideo: false,
nowIndex: e.detail.current,
videoStart: true,
})
this.videoCtx.play()
this.detailFn();
console.log(e.detail.current, 'dangqian')
if (e.detail.current == (videoList.length - 2)) {
console.log(this.data.pageNo)
this.nexVideoList()
}
},
// 加载更多
nexVideoList: function() {
let that = this;
let pageNo = this.data.pageNo;
let navItem = this.data.navItem;
let user = wx.getStorageSync('user');
let videoList = this.data.videoList;
let chetype = this.data.chetype;
let checolumid = this.data.checolumid;
let nowIndex = this.data.nowIndex;
let datVal = {
userId: user.id,
type: chetype,
columnId: checolumid,
pageSize: 10,
pageNo: pageNo
}
console.log("啥情况")
FZ._postJ3('column/v1/listcolumncontents', datVal).then(function(data) {
console.log(data)
let resoult = data.data;
if (resoult) {
if (resoult.length > 0) {
for (let i = 0; i < resoult.length; i++) {
resoult[i].url = resoult[i].videoUrl;
}
videoList = videoList.concat(resoult)
console.log(videoList)
pageNo++
that.setData({
videoList: videoList,
pageNo
});
} else {
// that.setData({
// pageTottomText: getApp().globalData.endText
// });
if (videoList.length - 1 == nowIndex) {
wx.showToast({
title: '没有更多数据了',
icon: 'none',
duration: 2000
})
}
}
} else {
if (data.message != "正常") {
wx.showToast({
icon: 'none',
title: data.message,
})
}
}
})
},
// 视频播放结束
endVideoFn: function() {
console.log("播放结算")
this.setData({
endVideo: true
})
},
// 初始注册--------------------------------
// 初始注册
startLogin: function() {
let that = this;
try {
Upj._start_Login(that.data.cheuid).then((data) => {
let resoult = data;
if (resoult) {
that.setData({
user: resoult
})
wx.setStorageSync('user', resoult);
// console.log("1这是成功")
// console.log(that.data.nowIndex)
// console.log(that.data.videoList.length - 2)
if (that.data.nowIndex > (that.data.videoList.length - 3)) {
// console.log("2这是成功")
that.nexVideoList()
}
this.detailFn();
} else {
wx.showToast({
title: data.message,
icon: 'none',
duration: 3000
})
}
}).catch((data) => {
wx.showToast({
title: data.message,
icon: 'none',
duration: 3000
})
})
} catch (err) {
console.log(err)
}
},
onShareAppMessage: function(e) {
let that = this;
let user = wx.getStorageSync('user');
let cityon = wx.getStorageSync('cityon');
let shareTitle = '';
let videoList = this.data.videoList;
let nowIndex = this.data.nowIndex;
let imageUrl = '';
console.log("转发数据")
console.log()
if (videoList[nowIndex].videoLogo) {
imageUrl = videoList[nowIndex].videoLogo;
}
try {
return {
title: shareTitle,
imageUrl: imageUrl,
path: '/page/school/pages/study/detail?cheuid=' + user.id + "&jsonParam=" + encodeURIComponent(JSON.stringify(videoList)) + '&index=' + nowIndex + '&type=' + this.data.chetype + '&columid=' + this.data.checolumid,
success: function(res) {
console.log(res)
},
fail: function(res) {}
}
} catch (e) {
console.log(e)
}
},
})
来源：https://www.cnblogs.com/dianzan/p/12165809.html