短視訊直播原始碼，滾動定位，規定每次滑動時下滑多少格

短視訊直播原始碼，滾動定位，規定每次滑動時下滑多少格

<template>
<scroll-view id="tabs" scroll-y="true" @scroll="tabScoll" :scroll-top="scrollInto">
<view>
<view id="scrollTop">
<!-- 頂部資訊 -->
<view>
頭部
</view>
</view>
<view>
<view :class="[barshow?'scroll-tab-fixed':'scroll-tab-static']" :style="{top:barshow?'0':'0'}">
<scroll-view scroll-x="true" :scroll-left="scrollLeft"
style="background-color: #fff;">
<view>
<view v-for="(item,index) in tabList"
:style="{color:activeTab == index?activeColor:'#8895ac'}" @click="changeTab(index)"
:id="'tabs'+index" :key="index">
<text>{{item.text}}</text>
<view v-if="activeTab == index"
:style="[tabBarStyle]">
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view ref="scroll">
<view :ref="'wrap'+index" v-for="(item,index) in tabList" :key="">
<view>
<!-- tab欄標籤 -->
<view :id="'wrap'+index">
{{item.text}}
</view>
 
<!-- 檢查專案 -->
<view>
<!-- 登記事項檢查 -->
<view v-for="(i,index) in item.des" :key="index">
{{item.text}}---內容{{index}}
</view>
</view>
 
</view>
</view>
 
</view>
</view>
</scroll-view>
 
</template>
 
<script>
export default {
name: 'tab-scroll-sticky',
data() {
return {
barshow: false, //是否顯示吸頂
tabTop: 0, //距離頂部的距離
activeTab: 0, //高亮tal欄的項
scrollInto: 0, //scrllo-view y軸滾動的高度
scrollLeft: 0, //tab欄X軸的滾動的距離
tabBarStyle: {}, //tab欄底部行線的樣式
warpTop: [], //每一個內容開始的高度（距離頂部的高度）
// 內容
tabList: [
{id:1,text:"第1111",des:20},
{id:2,text:"第22",des:20},
{id:3,text:"第333",des:20},
{id:4,text:"第44",des:20},
{id:5,text:"第55555",des:20},
{id:6,text:"第6666",des:20},
],
activeColor: '#ff0000',//線的顏色
};
},
computed: {},
onLoad(option) {
this.resetHight()
 
},
watch: {},
methods: {
//資料裝載完成後重新獲取高度
resetHight() {
this.$nextTick(async function() {
let rect = await this.GetRect("#scrollTop"); //獲取id為scrollTop的div的節點資訊
this.tabTop = rect.height; 
this._getTabRect(0); //獲取tab欄高亮第一位的資訊
this.barInit(); //獲取節點的高度
});
},
 
//獲取節點資訊
GetRect(selector) {
return new Promise((resolve, reject) => {
let view = uni.createSelectorQuery().in(this)
view.select(selector).boundingClientRect(rect => {
resolve(rect)
}).exec();
})
},
//獲取節點距離頂部距離
barInit: async function(index) {
this.scrollInto = 0 //初始值位0
let navTargetTop = [];
let navTargetTop1 = [];
// 遍歷通過ref獲取對應沒有個內容開始的高度
for (let i = 0; i < this.tabList.length; i++) {
var top = this.$refs['wrap' + i][0].$el.offsetTop
navTargetTop.push(parseInt(top))
}
// 最後把每一項內容開始節點的高度陣列賦值給this.warpTop
this.warpTop = navTargetTop;
},
//tab切換
changeTab(e) {
var that = this
this.activeTab = e;
this.$nextTick(function() {
that._getTabRect(that.activeTab); //頁面點選切換的時候，重新設定tab欄的資訊引數
if (e == 0) {
that.scrollInto = that.warpTop[e] - 44;
} else {
that.scrollInto = that.warpTop[e] - 93;
}
})
},
//獲取一個tab寬度
async _getTabRect(itemIndex) {
// 獲取tab欄的資訊
let rect = await this.GetRect("#tabs" + itemIndex);
let rect1 = await this.GetRect("#tabs" + itemIndex + ">.scroll-tab-list-text");
let width = (rect1.width * 0.67);
if (itemIndex == this.activeTab) {
this.scrollLeft = rect.left //向做滾動的距離
}
this.tabBarStyle = {
width: width + 'px',
background: this.activeColor,
}
},
//Y軸scroll滾動
async tabScoll(e) {
let scrollTop = e.detail.scrollTop; //獲取滾動的高度
let rect = await this.GetRect("#scrollTop"); //獲取頁面資訊
// 第一次滾動時，tabTop=0
if (this.tabTop == 0) {
let rect = await this.GetRect("#scrollTop");
this.tabTop = rect.height; //頁面沒有距離頂部的距離
}
// this.tabTop = 0 顯示置頂
this.barshow = scrollTop >= this.tabTop ? true : false;
let scrollTop1 = scrollTop;
// 迴圈遍歷所有內容開始節點的高度陣列
for (var i = 0; i < this.warpTop.length; i++) {
// 滾動的高度scrollTop1 小於this.warpTop[0]，
if (scrollTop1 <= this.warpTop[0]) {
this.activeTab = 0;
this.scrollInto = this.warpTop[0] - 44  //y軸滾動回this.warpTop[0]第一個節點的位置
this._getTabRect(0);
} else if (scrollTop1 > this.warpTop[this.warpTop.length - 1] - 93) {
// 如果大於最後一位
this.activeTab = this.warpTop.length - 1;
this.scrollInto = this.warpTop[this.warpTop.length - 1]
this._getTabRect(this.warpTop.length - 1);
} else {
// 其它，同理
if (scrollTop1 > this.warpTop[i] - 93 && scrollTop1 < this.warpTop[i + 1] - 93) {
this.scrollInto = scrollTop1
this.activeTab = i;
this._getTabRect(i);
}
}
}
 
},
}
};
</script>
 
<style scoped>
uni-page-body{
height: 100%;
overflow: hidden;
}
.tab-scroll-sticky{
height: 100%;
}
.flexRowCc {
display: flex;
flex-direction: row;
align-items: center;
}
 
.scroll-content {
position: relative;
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
 
.scroll-tab {
@extend .flexRowCc;
justify-content: space-between;
width: 100%;
height: 44px;
box-sizing: border-box;
border-top: 1px solid #F1F1F1;
border-bottom: 1px solid #F1F1F1;
background: #FFFFFF;
position: relative;
z-index: 999;
// overflow-x: auto;
 
&-static {
position: relative !important;
}
 
&-fixed {
position: fixed;
top: 0px;
left: 0;
width: 100%;
z-index: 9999;
}
 
&-list {
text-align: center;
font-size: 24upx;
color: #2266BC;
flex: 1 1 auto;
padding: 0 10upx;
position: relative;
 
&-text {
display: inline-block;
 
&-line {
position: absolute;
height: 4upx;
transform: translateX(-50%);
left: 50%;
border-radius: 16upx;
transition-duration: .5s;
margin-top: 4rpx;
}
}
}
}
}
 
.scroll-warp {
height: 100vh;
padding-bottom: 200upx;
// margin-bottom: 200upx;
}
 
// ---------------------------------------------
.directSignature {
&-top {
width: 750upx;
background: #f3c55c;
height: 500upx;
padding: 21upx;
}
&-tabstatus{
background-image: linear-gradient(to left, #f97e36, #f3c55c);
padding:10upx 30upx;
display: inline-block;
margin: 20upx 0;
color: #FFFFFF;
border-radius: 0 30upx 30upx 0;
}
&-checkProject {
padding: 0 20upx;
}
}
 
// 檢查專案
.directSignature-checkProject {
&-title {
color: #2266bc;
font-size: 30upx;
font-weight: 550;
// background-image: linear-gradient(to bottom, #e3edf9, #fff);
padding: 20upx;
border-radius: 15upx;
border-bottom: 3upx solid #eff5fb;
white-space: 4upx;
margin-bottom: 7upx;
background-color:  #e3edf9;
}
}
 
</style>

以上就是 短視訊直播原始碼，滾動定位，規定每次滑動時下滑多少格，更多內容歡迎關注之後的文章