短视频直播源码，滚动定位，规定每次滑动时下滑多少格

<template><br><scroll-view id="tabs" scroll-y="true" @scroll="tabScoll" :scroll-top="scrollInto"><br><view><br><view id="scrollTop"><br><!-- 顶部信息 --><br><view><br>头部<br></view><br></view><br><view><br><view :class="[barshow?'scroll-tab-fixed':'scroll-tab-static']" :style="{top:barshow?'0':'0'}"><br><scroll-view scroll-x="true" :scroll-left="scrollLeft"<br>style=""><br><view><br><view v-for="(item,index) in tabList"<br>:style="{color:activeTab == index?activeColor:'#8895ac'}" @click="changeTab(index)"<br>:id="'tabs'+index" :key="index"><br><text>{{item.text}}</text><br><view v-if="activeTab == index"<br>:style="[tabBarStyle]"><br></view><br></view><br></view><br></scroll-view><br></view><br></view><br><view ref="scroll"><br><view :ref="'wrap'+index" v-for="(item,index) in tabList" :key=""><br><view><br><!-- tab栏标签 --><br><view :id="'wrap'+index"><br>{{item.text}}<br></view><br> <br><!-- 检查项目 --><br><view><br><!-- 登记事项检查 --><br><view v-for="(i,index) in item.des" :key="index"><br>{{item.text}}---内容{{index}}<br></view><br></view><br> <br></view><br></view><br> <br></view><br></view><br></scroll-view><br> <br></template><br> <br><script><br>export default {<br>name: 'tab-scroll-sticky',<br>data() {<br>return {<br>barshow: false, //是否显示吸顶<br>tabTop: 0, //距离顶部的距离<br>activeTab: 0, //高亮tal栏的项<br>scrollInto: 0, //scrllo-view y轴滚动的高度<br>scrollLeft: 0, //tab栏X轴的滚动的距离<br>tabBarStyle: {}, //tab栏底部行线的样式<br>warpTop: [], //每一个内容开始的高度（距离顶部的高度）<br>// 内容<br>tabList: [<br>{id:1,text:"第1111",des:20},<br>{id:2,text:"第22",des:20},<br>{id:3,text:"第333",des:20},<br>{id:4,text:"第44",des:20},<br>{id:5,text:"第55555",des:20},<br>{id:6,text:"第6666",des:20},<br>],<br>activeColor: '#ff0000',//线的颜色<br>};<br>},<br>computed: {},<br>onLoad(option) {<br>this.resetHight()<br> <br>},<br>watch: {},<br>methods: {<br>//数据装载完成后重新获取高度<br>resetHight() {<br>this.$nextTick(async function() {<br>let rect = await this.GetRect("#scrollTop"); //获取id为scrollTop的div的节点信息<br>this.tabTop = rect.height; <br>this._getTabRect(0); //获取tab栏高亮第一位的信息<br>this.barInit(); //获取节点的高度<br>});<br>},<br> <br>//获取节点信息<br>GetRect(selector) {<br>return new Promise((resolve, reject) => {<br>let view = uni.createSelectorQuery().in(this)<br>view.select(selector).boundingClientRect(rect => {<br>resolve(rect)<br>}).exec();<br>})<br>},<br>//获取节点距离顶部距离<br>barInit: async function(index) {<br>this.scrollInto = 0 //初始值位0<br>let navTargetTop = [];<br>let navTargetTop1 = [];<br>// 遍历通过ref获取对应没有个内容开始的高度<br>for (let i = 0; i < this.tabList.length; i++) {<br>var top = this.$refs['wrap' + i][0].$el.offsetTop<br>navTargetTop.push(parseInt(top))<br>}<br>// 最后把每一项内容开始节点的高度数组赋值给this.warpTop<br>this.warpTop = navTargetTop;<br>},<br>//tab切换<br>changeTab(e) {<br>var that = this<br>this.activeTab = e;<br>this.$nextTick(function() {<br>that._getTabRect(that.activeTab); //页面点击切换的时候，重新设置tab栏的信息参数<br>if (e == 0) {<br>that.scrollInto = that.warpTop[e] - 44;<br>} else {<br>that.scrollInto = that.warpTop[e] - 93;<br>}<br>})<br>},<br>//获取一个tab宽度<br>async _getTabRect(itemIndex) {<br>// 获取tab栏的信息<br>let rect = await this.GetRect("#tabs" + itemIndex);<br>let rect1 = await this.GetRect("#tabs" + itemIndex + ">.scroll-tab-list-text");<br>let width = (rect1.width * 0.67);<br>if (itemIndex == this.activeTab) {<br>this.scrollLeft = rect.left //向做滚动的距离<br>}<br>this.tabBarStyle = {<br>width: width + 'px',<br>background: this.activeColor,<br>}<br>},<br>//Y轴scroll滚动<br>async tabScoll(e) {<br>let scrollTop = e.detail.scrollTop; //获取滚动的高度<br>let rect = await this.GetRect("#scrollTop"); //获取页面信息<br>// 第一次滚动时，tabTop=0<br>if (this.tabTop == 0) {<br>let rect = await this.GetRect("#scrollTop");<br>this.tabTop = rect.height; //页面没有距离顶部的距离<br>}<br>// this.tabTop = 0 显示置顶<br>this.barshow = scrollTop >= this.tabTop ? true : false;<br>let scrollTop1 = scrollTop;<br>// 循环遍历所有内容开始节点的高度数组<br>for (var i = 0; i < this.warpTop.length; i++) {<br>// 滚动的高度scrollTop1 小于this.warpTop[0]，<br>if (scrollTop1 <= this.warpTop[0]) {<br>this.activeTab = 0;<br>this.scrollInto = this.warpTop[0] - 44  //y轴滚动回this.warpTop[0]第一个节点的位置<br>this._getTabRect(0);<br>} else if (scrollTop1 > this.warpTop[this.warpTop.length - 1] - 93) {<br>// 如果大于最后一位<br>this.activeTab = this.warpTop.length - 1;<br>this.scrollInto = this.warpTop[this.warpTop.length - 1]<br>this._getTabRect(this.warpTop.length - 1);<br>} else {<br>// 其它，同理<br>if (scrollTop1 > this.warpTop[i] - 93 && scrollTop1 < this.warpTop[i + 1] - 93) {<br>this.scrollInto = scrollTop1<br>this.activeTab = i;<br>this._getTabRect(i);<br>}<br>}<br>}<br> <br>},<br>}<br>};<br></script><br> <br><style scoped><br>uni-page-body{<br>height: 100%;<br>overflow: hidden;<br>}<br>.tab-scroll-sticky{<br>height: 100%;<br>}<br>.flexRowCc {<br>display: flex;<br>flex-direction: row;<br>align-items: center;<br>}<br> <br>.scroll-content {<br>position: relative;<br>::-webkit-scrollbar {<br>display: none;<br>width: 0 !important;<br>height: 0 !important;<br>-webkit-appearance: none;<br>background: transparent;<br>color: transparent;<br>}<br> <br>.scroll-tab {<br>@extend .flexRowCc;<br>justify-content: space-between;<br>width: 100%;<br>height: 44px;<br>box-sizing: border-box;<br>border-top: 1px solid #F1F1F1;<br>border-bottom: 1px solid #F1F1F1;<br>background: #FFFFFF;<br>position: relative;<br>z-index: 999;<br>// overflow-x: auto;<br> <br>&-static {<br>position: relative !important;<br>}<br> <br>&-fixed {<br>position: fixed;<br>top: 0px;<br>left: 0;<br>width: 100%;<br>z-index: 9999;<br>}<br> <br>&-list {<br>text-align: center;<br>font-size: 24upx;<br>color: #2266BC;<br>flex: 1 1 auto;<br>padding: 0 10upx;<br>position: relative;<br> <br>&-text {<br>display: inline-block;<br> <br>&-line {<br>position: absolute;<br>height: 4upx;<br>transform: translateX(-50%);<br>left: 50%;<br>border-radius: 16upx;<br>transition-duration: .5s;<br>margin-top: 4rpx;<br>}<br>}<br>}<br>}<br>}<br> <br>.scroll-warp {<br>height: 100vh;<br>padding-bottom: 200upx;<br>// margin-bottom: 200upx;<br>}<br> <br>// ---------------------------------------------<br>.directSignature {<br>&-top {<br>width: 750upx;<br>background: #f3c55c;<br>height: 500upx;<br>padding: 21upx;<br>}<br>&-tabstatus{<br>background-image: linear-gradient(to left, #f97e36, #f3c55c);<br>padding:10upx 30upx;<br>display: inline-block;<br>margin: 20upx 0;<br>color: #FFFFFF;<br>border-radius: 0 30upx 30upx 0;<br>}<br>&-checkProject {<br>padding: 0 20upx;<br>}<br>}<br> <br>// 检查项目<br>.directSignature-checkProject {<br>&-title {<br>color: #2266bc;<br>font-size: 30upx;<br>font-weight: 550;<br>// background-image: linear-gradient(to bottom, #e3edf9, #fff);<br>padding: 20upx;<br>border-radius: 15upx;<br>border-bottom: 3upx solid #eff5fb;<br>white-space: 4upx;<br>margin-bottom: 7upx;<br> #e3edf9;<br>}<br>}<br> <br></style>