1.scss可以查看 该文章
2.滚动视频播放代码如下：
如图：
image.png
<template>
<view class="science-index width-100 min-h-vh-100 bg-ff">
<view v-if="Datalist.length!=0">
<view class="u-rela" :id="'videoitem_'+index" v-for="(item, index) in Datalist" :key="index">
<video class="width-100 h-518" :id="'video_'+index" :src="item.src" controls></video>
<view class="font-34 cor-ff u-abso pos-t-0 pos-l-0 pos-r-0 u-p-30 ">{{index}} - {{item.title}}</view>
</view>
<u-loadmore v-if="page != 1" bg-color="#fff" :margin-top="40" :margin-bottom="40" :status="status"
:icon-type="iconType" :load-text="loadText" />
</view>
<u-empty mode="list" v-if="DataList.length==0" />
</view>
</template>
<script>
var sys = uni.getSystemInfoSync();
var baseCenter = sys.windowHeight / 2;
import mixins from '@/common/mixin.js';
export default {
mixins: [mixins],
data() {
return {
Datalist : [
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
{title : "标题", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
],
videoContext: null, // 创建 video 元素
playIngIndex: null, //播放视频下标
timer: null,//控制 延迟器
}
},
onLoad: function() {
},
methods: {
scrollPlay: function(e) {
//暂停
if (this.playIngIndex != null) {
this.videoContext = uni.createVideoContext("video_" + this.playIngIndex);
this.videoContext.pause();
}
// 计算一下需要播放的视频
this.getNeedPlay(0);
},
getNeedPlay: function(i) {
var vsq = uni.createSelectorQuery().select("#videoitem_" + i);
vsq.fields({
rect: true,
size: true
}, data => {
var vTop = data.top;
if (vTop > 0 && vTop <= baseCenter + data.height / 2) {
this.playIngIndex = i;
console.log('play..... ', i);
this.videoContext = uni.createVideoContext("video_" + i);
this.videoContext.play();
} else {
i++;
if (i < this.Datalist.length) {
this.getNeedPlay(i);
}
}
}).exec();
}
},
/* 页面滚动监听*/
onPageScroll: function(e) {
if (this.timer != null) {
clearTimeout(this.timer);
}
this.timer = setTimeout(function() {
this.scrollPlay(e);
}.bind(this), 200);
},
}
</script>
<style lang="scss" scoped>
.science-index {}
</style>
3.mixin.js混入文件，公用 js 文件
data() {
return {
/* 分页 参数 设置 */
page: 1, //当前页数
last_page: 0, //总页面数
status: 'loadmore',
iconType: 'flower',
loadText: {
loadmore: '上拉加载',
loading: '努力加载中',
nomore: '没有更多了'
},
}
},
created() {
},
methods: {
/* 跳转外链 */
goReLaunch(val) {
uni.reLaunch({
url: val
});
},
/* 跳转 重定向 */
goRedirectTo(val) {
uni.redirectTo({
url: val
});
},
/* 跳转 Navigate*/
goNavigateTo(val) {
if (val) {
uni.navigateTo({
url: val,
});
} else {
this.showToast("敬请期待...");
}
},
/* 跳转 switchTab*/
goSwitchTab(url) {
uni.switchTab({
url: url
});
},
/* 复制链接 方法 */
copy(value) {
if (value) {
uni.setClipboardData({
data: value, //要被复制的内容
success: () => { //复制成功的回调函数
this.showToast(`复制成功`);
},
fail: () => {
this.showToast(`复制失败`);
},
});
} else {
this.showToast(`暂无可以复制内容哦`);
}
},
/* 排序 小到大 */
compare(prop) {
return function(obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
return val1 - val2;
}
},
/* 排序 大到小 */
compare1(prop) {
return function(obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
return val2 - val1;
}
},
/* 时分秒转时间戳
* status == 1 =>年月日 时
* status == ? =>时分秒
*/
time_to_sec(time, status) {
let data = new Date();
if (time) {
if (status == 1) {
let sec = new Date(time).getTime() / 1000;
return sec;
} else {
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let sec = new Date(year + '/' + month + '/' + day + ' ' + time).getTime() / 1000;
return sec;
}
}
},
/* 银行卡号 验证 */
luhnCheck(bankno) {
var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhn进行比较）
var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
var newArr = new Array();
for (var i = first15Num.length - 1; i > -1; i--) { //前15或18位倒序存进数组
newArr.push(first15Num.substr(i, 1));
}
var arrJiShu = new Array(); //奇数位*2的积 <9
var arrJiShu2 = new Array(); //奇数位*2的积 >9
var arrOuShu = new Array(); //偶数位数组
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) { //奇数位
if (parseInt(newArr[j]) * 2 < 9) arrJiShu.push(parseInt(newArr[j]) * 2);
else arrJiShu2.push(parseInt(newArr[j]) * 2);
} else //偶数位
arrOuShu.push(newArr[j]);
}
var jishu_child1 = new Array(); //奇数位*2 >9 的分割之后的数组个位数
var jishu_child2 = new Array(); //奇数位*2 >9 的分割之后的数组十位数
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
}
var sumJiShu = 0; //奇数位*2 < 9 的数组之和
var sumOuShu = 0; //偶数位数组之和
var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
}
for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
}
for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
//计算总和
sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);
//计算luhn值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhn = 10 - k;
if (lastNum == luhn) {
// $("#banknoInfo").html("luhn验证通过");
return true;
} else {
// $("#banknoInfo").html("银行卡号必须符合luhn校验");
return false;
}
},
/* 对象 过滤不需要的字段 保留需要字段 */
filterObj(obj, arr) {
if (typeof(obj) !== "object" || !Array.isArray(arr)) {
throw new Error("参数格式不正确")
}
const result = {}
Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
result[key] = obj[key]
})
return result
},
/* 小黑窗 公用函数 */
showToast(msg, icon) {
uni.showToast({
title: msg,
icon: icon ? icon : 'none',
duration: 2000,
mask: true,
});
},
/* loading 小黑窗 公用函数 */
showLoading(msg) {
uni.showLoading({
title: msg,
mask: true,
});
},
/* 隐藏 loading 小黑窗 公用函数*/
hideLoading() {
setTimeout(() => {
uni.hideLoading();
}, 2000);
},
/* 返回上一页 */
onBack(backnum) {
uni.navigateBack({
delta: backnum,
});
},
/* 设置标题 */
setNavigationBarTitle(title) {
uni.setNavigationBarTitle({
title: title
})
},
}
}
