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