上面一排tab导航, 下面切换滚动,,
<template>
<view>
<!-- 导航切换 -->
<view class="tab-bars">
<scroll-view class="tab-bar" scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollInto" scroll-with-animation="true">
<view class="tab-bars-list" :class="{‘active‘: tabIndex === item.id}" v-for="(item, index) in tabList" :key="index" @click="onClickTab($event, index)" :id="‘tab-‘+item.id" >
{{item.title}}
</view>
</scroll-view>
<navigator class="tab-bar-right">
<image src="/static/icon-like-4.png" mode="aspectFit" class="tab-bars-message"></image>
</navigator>
</view>
<swiper class="tab-view" :style="{height: swiperheight +‘px‘}" :current="tabIndex" :duration="300" @change="onChangeSwiper">
<swiper-item class="tab-view-item" v-for="(tab, index) in tabList" :key="index">
<!-- 首页 -->
<template v-if="tab.id===1">
<scroll-view class="scroll-view" :style="{height: swiperheight +‘px‘}" :scroll-x="false" :scroll-y="true" :refresher-threshold="200" @refresherpulling="refresherpulling()">
<!-- 轮播 -->
<swiper class="swiper" :autoplay="true" :circular="true" indicator-dots="true" indicator-active-color="#fff"
indicator-color="rgba(255,255,255,.3)">
<swiper-item v-for="(item, indexList) in list" :key="indexList + ‘item‘">
<image :src="item.src" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<!-- 查看更多 -->
<view class=‘titles‘>
<view class="titles-left">
<image src="/static/icon-like-4.png" mode="aspectFit" class="titles-icon"></image>
<text class="titles-left-text">推荐主播</text>
</view>
<navigator class="titles-more">查看更多 ></navigator>
</view>
<!-- 轮播下的左右滑动 -->
<scroll-view scroll-x="true" class="scroll-view" :show-scrollbar="false">
<tiger-list :list="list" class="tjzb-imgs"></tiger-list>
</scroll-view>
<!-- 排行榜 -->
<view class="ranking-lists">
<navigator class="ranking-list">收益榜</navigator>
<navigator class="ranking-list">贡献榜</navigator>
</view>
<!-- 热门主播 -->
<view class=‘titles‘>
<view class="titles-left">
<image src="/static/icon-like-4.png" mode="aspectFit" class="titles-icon"></image>
<text class="titles-left-text">热门主播</text>
</view>
</view>
<view class="hot-anchors-boxs">
<tiger-list :list="list" class="hot-anchors"></tiger-list>
</view>
<!-- <template v-if="uniLoadMore == ‘more‘">
</template> -->
<uni-load-more :status="uniLoadMore" iconType="circle"/>
</scroll-view>
</template>
<!-- 其他分类列表 -->
<template v-else>
<scroll-view class="scroll-view pdl10" :style="{height: swiperheight +‘px‘}" :scroll-x="false" :scroll-y="true" :refresher-threshold="200" :scroll-anchoring="true" :enable-back-to-top="true" :scroll-with-animation="true" >
<tiger-list :list="list"></tiger-list>
</scroll-view>
</template>
</swiper-item>
</swiper>
</view>
</template>
<script>
import config from ‘@/utils/config.js‘;
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import tigerList from "./list.vue";
export default {
components: {
uniLoadMore,
tigerList
},
data() {
return {
‘scrollInto‘: ‘‘,
‘swiperheight‘: 0,
‘tabIndex‘:0,
‘uniLoadMore‘: ‘more‘,
‘tabList‘: [
{‘title‘: ‘关注1‘, ‘id‘: 0},
{‘title‘: ‘关注2‘, ‘id‘: 1},
{‘title‘: ‘关注3‘, ‘id‘: 2},
{‘title‘: ‘关注4‘, ‘id‘: 3},
{‘title‘: ‘关注5‘, ‘id‘: 4},
{‘title‘: ‘关注6‘, ‘id‘: 5},
{‘title‘: ‘关注7‘, ‘id‘: 6},
{‘title‘: ‘关注8‘, ‘id‘: 7},
{‘title‘: ‘关注9‘, ‘id‘: 8},
],
‘list‘: [{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 0
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 0
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 1
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 1
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 1
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 2
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 3
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 3
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 4
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 5
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 6
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 8
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 9
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 6
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 8
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 9
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 6
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 8
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 9
},
{
‘src‘: ‘/static/live/topic-top.png‘,
‘id‘: 7
},
]
}
},
onLoad() {
uni.getSystemInfo({
success:(res)=>{
let height = res.windowHeight;
this.swiperheight = height;
}
})
},
onBackPress(e) {
},
onHide() {
},
onShow() {
},
onPullDownRefresh() {
console.log(‘refresh‘);
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
onReachBottom() {
console.log(‘onReachBottom‘);
this.uniLoadMore = ‘loading‘;
setTimeout( () => {
this.uniLoadMore = ‘noMore‘;
}, 1000)
},
methods: {
refresherpulling() {
cconsole.log(‘refresherpulling‘);
},
onClickTab(e, index) {
if (this.tabIndex === index) return;
this.tabIndex = index;
const scrollIntoIndex = index - 1;
this.scrollInto = ‘tab-‘+ this.tabList[scrollIntoIndex < 0 ? 0 : scrollIntoIndex].id;
},
onChangeSwiper(e) {
let index = e.target.current || e.detail.current;
this.tabIndex = index;
},
tabHandler(item) {
this.tabIndex = item.id;
}
}
}
</script>
<style lang="scss" scoped>
.pdl10{
padding-left:10rpx;
}
.titles {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 10rpx;
}
.titles-left {
display: flex;
align-items: center;
}
.titles-left-text {
font-weight: bold;
}
.titles-more {
font-size: 12rpx;
color: #999;
}
.titles-icon {
margin-right: 5rpx;
width: 38rpx;
height: 36rpx;
}
.scroll-view {
flex-direction: row;
white-space: nowrap;
}
.ranking-lists {
display: flex;
padding: 12rpx 20rpx 0;
}
.ranking-list {
margin-right: 15px;
width: 380rpx;
height: 160rpx;
background: #000;
}
.ranking-list:nth-of-type(2) {
margin-right: 0;
}
.hot-anchors-boxs{
padding: 0 8rpx 0 10rpx;
.hot-anchors /deep/ .more-imgs{
width: 360rpx;
.more-img{
width:100%;
}
}
}
.hot-anchors /deep/ .more-imgs:nth-child(2n) {
margin-right:0;
}
.tjzb-imgs /deep/ .more-imgs{
display: inline-block;
float: none;
}
.tab-bars{
position:fixed;
left:0;
top:0;
z-index: 9999;
width: 100%;
background: #fff;
display: flex;
justify-content: space-between;
padding:0 32rpx 0 10rpx;
color: #666;
font-weight: bold;
.tab-bars-message{
margin: 0 0 0 10rpx;
width: 40rpx;
height: 40rpx;
}
.tab-bar{
width: 650rpx;
height: 66rpx;
white-space: nowrap;
display: inline-block;
}
.tab-bar-right{
display: inline-block;
padding: 4px 13px 0 0;
}
.tab-bars-list{
display: inline-block;
margin-bottom: 10rpx;
height: 56rpx;
padding: 0 14rpx;
line-height: 56rpx;
}
.tab-bars-list.active{
border-bottom: 4rpx red solid;
color: #000;
font-size: 30rpx;
}
}
.tab-view{
padding-top:68rpx;
}
</style>
原文:https://www.cnblogs.com/anans/p/14828447.html