uniapp 滚动tab导航开发

最新推荐文章于 2023-11-05 19:36:07 发布
最新推荐文章于 2023-11-05 19:36:07 发布
阅读量346 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45200726/article/details/108603946
版权

 index.vue

<template>
	<view>
		
		<!-- 原顶部组件 -->
		<view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab" >
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}"  @tap="tabtap(index)">
						{{tab.name}}
						<view class="swiper-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view> 
		
		<!-- 引入顶部导航组件 -->
		 <!-- <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head> -->
		
		
		<view class="uni-tab-bar" >
		<swiper class="swiper-box" v-bind:style="{height:swiperheight+'rpx'}" :current="tabIndex" @change="tabChange">
			<swiper-item v-for="(items,index) in newslist" :key="index">
				<scroll-view scroll-y class="list">	
							<!-- 图文列表 -->
						 <block v-for="(item, index1) in items.list" :key="index1">
						 	<index-list :item="item" :index="index1"></index-list>	
						 </block> 		
							<!-- 上拉加载-->
						<view class="load-"more></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		</view> 
		
		

		 <!-- <block v-for="(item, index) in list" :key="index">
			<index-list :item="item" :index="index"></index-list>
		</block> -->
	</view>
</template>

<script>
import indexList from "../../components/index/index-list.vue";
import swiperTabHead from "../../components/index/swiper-tab-head.vue";
export default {
		components:{
			indexList,
			swiperTabHead
		},
		data() {
			return {
				swiperheight:1350,
				tabIndex:0,
				tabBars: [
					{name: '关注',id: 'guanzhu'}, 
					{name: '推荐1',id: 'tuijian'},
					{name: '体育2',id: 'tiyu'}, 
					{name: '推荐3',id: 'tuijian'},
					{name: '体育4',id: 'tiyu'},
					{name: '推荐5',id: 'tuijian'},
					{name: '体育6',id: 'tiyu'},
					{name: '热点',id: 'redian'}
				],
				
				newslist:[
					{   
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
						],
					},
					
					
					{
						loadtext:"上拉加载更多",
						list:[
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
						],
					},
					
					
					
					{
						list:[
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
							{
								userpic:"../../static/demo/datapic/10.jpg",
								username:"昵称",
								isgaunzhu:true,
								title:"这是一个",
								type:"img", //img:图文  video:视频类型
								titlepic:"../../static/demo/datapic/11.jpg", //封面图
								infonum:{
									index:1   ,//0未订   1顶   2踩
									dingnum:11,
									cainum:12,
								},		
								commentnum:10,//评论
								sharenum:10,    //分享
							},
						],
					}
				],		
						
				
				list:[
					//图片样式
					{  
						userpic:"../../static/demo/datapic/10.jpg",
						username:"昵称",
						isgaunzhu:true,
						title:"这是一个标题",
						type:"img", //img:图文  video:视频类型
						titlepic:"../../static/demo/datapic/11.jpg", //封面图
						infonum:{
							index:1   ,//0未订   1顶   2踩
							dingnum:11,
							cainum:12,
						},		
						commentnum:10,//评论
						sharenum:10,    //分享
					},
					//视频样式
					{
						userpic:"../../static/demo/datapic/10.jpg",
						username:"昵称",
						isgaunzhu:true,
						title:"这是一个标题",
						type:"video", //img:图文  video:视频类型
						titlepic:"../../static/demo/datapic/11.jpg", //封面图
						playnum:200000,
						long:"2:47",
						infonum:{
							index:0   ,  //0未顶    1顶    2踩
							dingnum:11,
							cainum:12,
						},		
						commentnum:10,  //评论
						sharenum:10,    //分享
					}
				]
			}
		},
		onLoad(){
			uni.getSystemInfo({
				success:(res)=>{
					let height=res.windowHeight-rpx(100);
					console.log(height);
					console.log(res.screenHeight);
					this.swiperheight=height;
					       
				}
			})
		},
	
	 	methods: {
		 	//点击事件
			 tabtap(index){
				this.tabIndex=index
			},	 		
			//滑动事件
			tabChange(e){	
				 this.tabIndex=e.detail.current;			
			}
		}
	}	 
</script>

<style>
	.uni-swiper-tab{
		border-bottom:2rpx solid #EEEEEE ;
	}
	.swiper-tab-list{
		
		font-weight: bold;
	}
	.uni-tab-bar {
		color: #343434;
		
	}
	.active .swiper-tab-line {
		border-bottom: 8rpx solid #fede33;
		width: 70rpx;
		margin: auto;  /* 居中 */
		border-radius: 20rpx;
	} 
</style>

 

 

组件：swiper-tab-head.vue

<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x class="uni-swiper-tab" >
			<block v-for="(tab,index) in tabBars" :key="tab.id">
				<view class="swiper-tab-list" :class="{'active':tabIndex==index}"  @tap="tabtap(index)">
					{{tab.name}}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view> 
	
</template>

<script>
	export default {
		//传入数据
		props:{
			tabBars:Array,
			tabIndex:Number,
			
		},
		methods:{
			//点击事件  子组件传到父组件
			tabtap(index){
				/* this.tabIndex=index; */
				this.$emit('tabtap',index);
			},
		}
	}
</script>

<style>
	
/* 	样式已经导入组件 */
  /* .uni-swiper-tab{
		border-bottom:2rpx solid #EEEEEE ;
	}
	.swiper-tab-list{
		
		font-weight: bold;
	}
	.uni-tab-bar {
		color: #343434;
		
	}
	.active .swiper-tab-line {
		border-bottom: 8rpx solid #fede33;
		width: 70rpx;
		margin: auto;  /* 居中 */
		/* border-radius: 20rpx; */
/* 	} */
	/* */ 
</style>

未解决上下滑动高度问题

weixin_45200726
关注
uniapp 顶部tab切换菜单
03-16
【uniapp 顶部tab切换菜单】是基于uniAPP框架实现的一种常见的用户界面元素，它用于在多个视图间进行切换，常应用于移动应用或Web应用的顶部导航。uniAPP是一个多端开发框架，允许开发者使用Vue.js语法编写一次代码...
uniapp 解决swiper Tab选项卡切换高度自适应问题
热门推荐
xiakekeali的博客
09-20 1万+
uniapp 解决swiper滚动高度自适应问题 问题描述：使用的是uniapp 官网案例中的一个swiper插件（插件名：uni-swiper-dot），当需要tab滚动，但是它又只能在最外层的swiper处设置一个固定的高度，纠结很久以后，终于想出了办法，我把最内层我写的东西的高度的值取出来，然后在赋值给最外层，算是完成了swiper高度自适应的问题。 作为一个前端小白，使用uniapp开发a...
uniapp 顶部tab+主体swiper 手势滑动及点击切换模板
weixin_44104659的博客
04-09 706
效果图： 代码： <template> <view class="page"> <view class="page-head"> <view :class="index==tabIndex?'isActive':''" v-for="(item,index) in tabList" :key="index" @click="handleClickTab(index)">{{item}}</view> </view>
uni-app 利用自带swiper实现点击tab内容滑动，滑动内容tab切换（不使用插件）
墨迹斑斑的老墙
10-01 1万+
结构 <view class="ui-car-select"> <view class="ui-car-name-list"> <view class="ui-car-name-item" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="inde...
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 8929
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
uni-app 动态设置 swiper 的高度 自定义Tab
weixin_72271537的博客
05-14 716
【代码】uni-app 动态设置 swiper 的高度 tab栏切换，左右滑动。
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
09-02
在本篇讨论中，我们将深入探讨如何使用`Sticky`组件来实现带有`sticky`效果的`tab`导航和滚动导航。 首先，`tab`导航是一种常见的交互设计，允许用户在多个视图之间切换，通常每个视图代表不同的内容区域。在`...
基于uniapp的多tab滚动吸顶效果
11-19
【标题】"基于uniapp的多tab滚动吸顶效果"涉及到的是在移动应用开发中，如何利用uniapp框架实现一个动态的多标签页（tab）滚动时固定在顶部（吸顶）的效果。uniapp是一个使用Vue.js语法开发跨平台应用的框架，它允许...
vue滚动tab跟随切换效果
10-16
在Vue.js中实现滚动tab跟随切换效果是一种常见的增强用户体验的交互设计，特别是在移动应用或响应式网站中。这种效果使得用户在浏览长页面时能够轻松地切换不同内容区域。以下将详细讲解如何在Vue中创建这个功能。 ...
uniapp实现tabs标签页滑动，使用scroll-view 和swiper
LJ_James_的博客
10-15 2460
【代码】uniapp实现tabs标签页滑动，使用scroll-view 和swiper。
uni-app页面点击tab左右滑动（swiper）
starstarstarl的博客
07-22 2759
uni-app页面点击tab左右滑动（swiper）
uniapp swiper组件实现tab导航滑动切换文本内容
erduoduo520的专栏
11-29 1833
swiper组件可以做滑动切换，但是必须设置一个固定的高度，每一个swiper-item里的内容后台返回的文字内容不一样，就会造成内容不能自动撑开，会被截取 重点：使用nextTick延时设置 //导航 <view class="tab-menu row acenter"> <view :class="{'cur':type==1}" @tap="menuClick(1)"> <text>导航一</text> </v
uniapp 左右滑动切换页面并切换tab
m0_58135258的博客
08-10 7819
uniapp 左右滑动切换页面并切换tab
uni-app tab滑动切换
qq_43579525的博客
07-13 1万+
1.父组件index.vue <template> <view> <!-- * 头部tab * 1.头部tab在点击的时候需把自己的index传到父组件中去通过 * this.$emit('方法名',index); * * --> <swiper-tab-head :tabBars="tabBar...
uni-app swiper tab导航切换
weixin_44134551的博客
05-24 549
<template> <!-- 这里的注意点，使用 scroll-view时，如果想让元素横向也就是X轴排列的话 要注意以下几点： 1、scroll-view不支持flex，默认block； 2、scroll-view设置scroll-x="true"; width: 100%; white-space: nowrap;（这个属性很重要，能不能滑动都看这个属性） 3、子元素设置display: inline-block； 4、子元素内容宽度要超出scroll-view的宽。
uni-app--tabs切换swiper
---
10-26 1215
父组件 <template> <view class="wrap"> <tabs-swiper :getTabs='getTabs' @changTab="changTab"></tabs-swiper> <swiper class="swiper-box" :current="tabIndex"> <swiper-item class="swiper-item"> <scroll-view scr
uniapp 实现tabs的效果（scroll-view+swiper）
小白前端
04-22 1072
<template> <view class="content"> <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-with-animation="true" :scroll-into-view="scrollinto"> <view v-for="(item,index) in list" :key="index" :id="'tab'+in.
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
weixin_44519496的博客
08-02 1145
效果图： tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。 下面是代码 html <template> <view> <scroll-view class="scroll1" scroll-x="true"> <view :class="currentTa
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4765
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
uniapp顶部滚动导航栏
最新发布
03-16
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。在UniApp中，可以使用组件来实现顶部滚动导航栏。 一种常见的实现方式是使用uni-app提供的`uni-segmented-control`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值