1、直接复制粘贴引入uniapp页面
如果缺少什么css 自己补充就好了,做个笔记,内容过少的情况,tab选项不是百分百的切换到最后一个,没想好怎么优化
<template>
<view class="page">
<!-- 顶部选卡 -->
<view class="scroll-row d-flex justify-between border-top position-fixed top-0" style="height: 80rpx;background-color: #FFFFFF;z-index: 1000;">
<view
@tap="changeTab(index)"
:class="tabIndex === index ? 'main-text-color ' : ''"
class="scroll-row-item px-3 flex-1"
style="height: 80rpx; line-height: 80rpx;"
v-for="(i, index) in tabbars"
:key="index"
>
<text class="font-md pb-1" :style="tabIndex === index ? 'border-bottom: 5rpx solid #3088ff; ' : ''">{{ i.name }}</text>
</view>
</view>
<!-- 填充 -->
<view style="height: 80rpx;" class="w-100"></view>
<!-- 列表 -->
<scroll-view scroll-y="true" @scroll="tabScoll" :scroll-top="scrollInto" scroll-with-animation :scroll-into-view="scrollinto" :style="'height:' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
<view class="scroll-box">
<view class="box1" :id="'tab'+index" v-for="(item,index) in conentist" :key="index">
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
<view>我是第{{index}}个6666</view>
</view>
</view>
<!-- 上拉加载更多 -->
<!-- <view class="d-flex j-center a-center text-light-muted py-3">
{{item.loadText}}
</view> -->
</scroll-view>
<!-- 底部栏 -->
<view class="cu-bar bg-white tabbar border shop foot" id="cubar">
<button class="action" open-type="contact">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="bg-add submit">加入购物车</view>
<view class="bg-send submit">立即订购</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 滚动条子元素id
scrollinto: '',
scrollInto:0,
scrollTopHeight:0,//滚动距离
warpTop:[],
// 滚动条高度
scrollH: 500,
// 当前选项索引
tabIndex: 0,
// 顶部选卡
tabbars: [{ name: '商品介绍' ,id:0}, { name: '图文详情',id:1 }, { name: '商品评价',id:2 }, { name: '相关活动',id:3 }],
// 模板内容
conentist:[null,null,null,null],
load: true
}
},
onReady() {
// 获取可视区域的高度
uni.getSystemInfo({
success: res => {
let tabheight = 0;
this.GetRect('#cubar').then((res2)=>{
tabheight= res2.height
// 因为获取的高度是px,设置的是upx ,需要转换
this.scrollH = res.windowHeight - tabheight- uni.upx2px(82);
})
}
});
// 初始化事件
this.__init()
this.$nextTick(async function(){
this.barInit();
})
},
methods: {
// 初始化事件
__init(){
},
// 顶部选卡 选择
changeTab(index) {
this.tabIndex = index;
this.scrollinto= 'tab'+index
// if(index==0){
// this.scrollInto =this.warpTop[index]-44;
// }else{
// this.scrollInto =this.warpTop[index]-88;
// }
},
// 加载数据- 根据轮播图触发索引获取数据-触底事件
addSetData(){
let index = this.tabIndex;
// this.newsitem[index].list = demo2;
},
//触底
loadmore(e){
this.$nextTick(()=>{
setTimeout(()=>{
this.tabIndex =3;//触底事件比滚动事件先触发,用定时器解决,反正是浏览到最后,直接强制显示为最后一个tab
},200)
})
},
//scroll滚动
async tabScoll(e){
//48为兼容值 第一种计算
// let scrollTop = e.detail.scrollTop;
// this.scrollTopHeight = scrollTop;
// let scrollTop1 = scrollTop;
// if(scrollTop1<=this.warpTop[1] - 48){
// this.tabIndex = 0;
// }
// if(scrollTop1>this.warpTop[1]-48 && scrollTop1<this.warpTop[2]-48){
// this.tabIndex = 1;
// }
// if(scrollTop1>this.warpTop[2]-48 && scrollTop1<this.warpTop[3]-48){
// this.tabIndex = 2;
// }
// if(scrollTop1>this.warpTop[3]-48){
// this.tabIndex =3;
// }
//10为padding-top值 第2种计算
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.tabbars.length; i++) {
let view = uni.createSelectorQuery().select("#tab" + this.tabbars[i].id);
view.fields({
size: true
}, data => {
this.tabbars[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.tabbars[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.tabbars.length; i++) {
if (scrollTop > this.tabbars[i].top && scrollTop < this.tabbars[i].bottom) {
// this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabIndex = this.tabbars[i].id
console.log(scrollTop)
return false
}
}
},
//获取节点距离顶部距离
barInit:async function (index){
let navTargetTop = [];
let randoms = 93;//顶部栏高度+tab高度+兼容值
for(let i = 0 ; i < this.tabbars.length ; i++){
this.GetRect("#tab"+i).then(res=>{
navTargetTop.push(parseInt(res.top))
})
}
this.warpTop = navTargetTop;
},
}
}
</script>
<style scoped lang="scss">
.page {
background-color: #f2f4f7;
width: 750rpx;
min-height: 100vh;
}
.bg-add{
background-color:#3377FF ;
color: #FFFFFF;
}
.bg-send{
background-color:#3344FF ;
color: #FFFFFF;
}
.box1{
padding-top: 10rpx;
border: 2rpx solid red;
margin-bottom: 30rpx;
}
.scroll-box{
padding-bottom: 40rpx;
}
</style>