uniapp 开发小程序顶部选项卡与加载对应页面数据

已于 2022-08-16 16:52:29 修改
阅读量2k 收藏 39
点赞数 3
分类专栏： uni-app 文章标签： 小程序
于 2021-01-23 14:50:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38946164/article/details/113048571
版权

效果图：
在这里插入图片描述

前端代码：

<template>
	<view>
		<!-- 选项卡头部 -->		
		<scroll-view class="tab" scroll-x="true"  :scroll-left="scrollLeft" >
			<block v-for="(item,index) in tabData" :key="index" >
				<!-- 标签动态样式 -->
				<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
					{{item.title}} 
				</view>
			</block>		
		</scroll-view>
		
		<!-- 选项卡页面 -->
		<swiper class="swiper" :current="currentTab" duration="300"  @change="swiperTab" :style=" {height: windowHeight +'px'} ">
			<swiper-item v-for="(item,index) in tabData" :key="index">
				<scroll-view  scroll-y="true" :style=" {height: windowHeight +'px'} " @scrolltolower="getMore" >
					<view class="page-item" >
						<view v-for="(item,index2) in contentData" :key="index2">
							<!-- v-if="currentTab==item.type" 只渲染当前页面对应的数据，不然每个页面的内容都相同-->
							<view class="page-item-box" v-if="currentTab==item.type">   
								<image class="box-image"  mode="aspectFill" :src="item.imgeUrl" ></image>
								<view> {{item.content}} </view>
							</view>							
						</view>
					</view>
				</scroll-view>
			</swiper-item>			
		</swiper>		
	</view>
</template>

<script>
	export default {
		data() {
			return {				
				currentTab: 0,  //标签初始位置
				scrollLeft: 0,	//tab标题的滚动条位置			
				windowHeight: 0,
				windowWidth: 0,
			
				tabData:[  //标签数据
					{type:0,title:"最新"},
					{type:1,title:"热门"},
					{type:2,title:"电影"},	
					{type:3,title:"电视"},	
					{type:4,title:"综艺"},	
					{type:5,title:"体育"},	
					{type:6,title:"教育"},	
				],
				contentData: [] //内容数据				
			}
		},
		
		onLoad() {
			wx.getSystemInfo({  //获取系统信息
				success: (res) => {						
					this.windowHeight = res.windowHeight
					this.windowWidth = res.windowWidth					
				}
			});
			
			this.getData()
		},
		
		methods: {			
			//点击切换
			clickTab(e) {
				let clickIndex = e.target.dataset.current				//当前标签的索引
				let singleNavWidth = this.windowWidth / 5  				//每个标签的宽度, 显示5个标签		
				this.scrollLeft = (clickIndex - 2) * singleNavWidth  	//水平滚动条位置, tab选项居中 
			
				if (this.currentTab === clickIndex) {
					return false;
				} else {					
					this.currentTab = clickIndex	//使页面对应标签	
					this.getData()
				}
			},
			
			//滑动切换
			swiperTab(e) {				
				let swiperIndex = e.detail.current            //当前页面的索引
				let singleNavWidth = this.windowWidth / 5    //每个标签的宽度 ,显示5个标签
				this.scrollLeft = (swiperIndex - 2) * singleNavWidth  	//使标签跟随页面滚动,超过屏幕范围的标签显示出来
				this.currentTab = swiperIndex    //使标签对应页面	
				this.getData()
			},
			
			//根据页面索引获取对应的云数据
			getData() {
				let type = this.currentTab
				const db = wx.cloud.database()  //引用默认环境的数据库，指定环境: wx.cloud.database({env: 'test'})
				db.collection('videoImages')	//云端数据库里面的集合名称 				
				.where({type:type})
				.get({
					success:(res) =>{  //箭头函数能直接使用 this
						//console.log('请求成功',res)						
						this.contentData.push(...res.data)
					},
					fail:(err) =>{
						console.log('获取数据失败',err)
					}
				})
			},
			
			// 加载更多
			getMore(){
				//this.getData()
			}
		}
	}
</script>


<style>
	page{
	    height: 100%;
		width: 100%;
	}
	.tab{  /* 标签栏 */
		height: 80rpx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		line-height: 80rpx;
		background: #f7f7f7;		
		font-size: 16px;
		white-space: nowrap;
		/* 固定吸顶 */
		position: fixed; 
		top: 0;
		left: 0;
		z-index: 99;
	}
	.tab-item{  /* 单个标签 */
        width: 20%; 	    
		display: inline-block;
		text-align: center;
	}
	.active{  /* 选项卡活动时的样式 */
	    color:#F65959;
		font-size: 20px;	    
	}	

	.page-item{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;		
		justify-content: flex-start;		
		align-items: center;
		padding-top: 80rpx;
		padding-left: 16rpx;
	}
	.page-item-box{	
		display: flex;
		flex-direction: column;
		height: 320rpx;
		width: 220rpx;	
		/* background-color: #808080; */
		/* border:1px solid #cc22b0; */  /* 边框 */
		border-radius: 5px;
		box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4); /* 框阴影 */
		text-align: center; /* 居中对齐 */
		margin: 10rpx;
	}
	.box-image{
		height: 280rpx;
		width: 220rpx;
		border-radius: 5px;
	}
</style>

后端数据格式：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

以下是2021-11-03更新 【双列分类】
请添加图片描述

<template>
	<view class="page-box">
		<!-- 左边栏 -->
		<view class="left-tab">
			<scroll-view class="tab" scroll-y="true" scroll-with-animation :scroll-top="scrollTop">
				<block v-for="(item,index) in tabData" :key="index" >
					<!-- 标签动态样式 -->
					<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index" @click="clickTab">
						{{item.title}} 
					</view>
				</block>		
			</scroll-view>
		</view>
		
		<!-- 右边页面 -->
		<block v-for="(item,index) in tabData" :key="index">
			<scroll-view class="right-box" scroll-y="true"  v-if="currentTab==index">
				<view class="page-view">
					<view class="class-item">
						<view class="item-title">
							<text>{{item.title}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in contentData" :key="index1">
								<image class="item-menu-image" :src="item1.fileID" mode=""></image>
								<view class="item-menu-name">标题</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>		
	</view>
</template>

<script>		
	export default {
		data() {
			return {
				windowHeight: 0,
				windowWidth: 0,
				currentTab: 0,  //标签初始位置						
				hasMore:true ,
				pageIndex: 1 ,
				contentData: [], //内容数据
				tabData:[  //标签数据
					{type:0,title:"爱情"},
					{type:1,title:"唯美"},
					{type:2,title:"动漫"},	
					{type:3,title:"风景"},	
					{type:4,title:"可爱"},	
					{type:5,title:"创意"},	
					{type:6,title:"鲜花"},
					{type:7,title:"汽车"},
					{type:8,title:"运动"},
					{type:9,title:"游戏"},
					{type:10,title:"新闻"},
					{type:11,title:"军事"},
					{type:12,title:"经济"}
				]			
             
			}
		},
		
		onLoad() {
			uni.getSystemInfo({  //获取系统信息
				success: (res) => {						
					this.windowHeight = res.windowHeight
					this.windowWidth = res.windowWidth					
				}
			});			
			this.getData()
		},
		
		// 分享给朋友
		onShareAppMessage: function () { },
		//分享到朋友圈
		onShareTimeline: function () { },
		
		methods: {			
			//点击左边切换
			clickTab(e) {				
				let clickIndex = e.target.dataset.current	//当前标签的索引			
				this.currentTab = clickIndex	//使页面对应标签
				this.pageIndex = 1
				this.hasMore = true
				this.contentData = []
				this.getData()
			},			

			
			//根据页面索引获取对应的云数据
			getData() {
				if(this.hasMore) {				
					uni.showLoading({
						title: '加载中...'
					})
					
					let type = parseInt(this.currentTab) //字符串转数字
					let pageIndex = parseInt(this.pageIndex)
					uniCloud.callFunction({  //调用云函数
						name:'getUrl',  //云函数名称
						data:{  //以下是云函数需要传入的参数					
							filter:{type:type},          //筛选条件
							pageIndex: pageIndex ,      //第几页
							pageSize: 30        //每页的记录条数
						},
						success:(res) => {
							console.log(res)
							this.contentData.push(...res.result.data)  //云端返回的查询数据,追加到数组
							this.hasMore = res.result.hasMore  //云端返回的是否有更多数据
							if (this.hasMore) {
								this.pageIndex = this.pageIndex + 1
							}						
						},
						fail:()=> {
							console.log('调用云函数失败')
						},
						complete:() => {
							uni.hideLoading()
						}	
					})
				} else {
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				}
			}
		}
	}
</script>


<style>
	.page-box{
		display: flex;
		flex-direction: row;
		height: calc(100vh); /* 需要定义高度,否则不能分栏滚动 */
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}
	.left-tab{
		flex: 1; /*均匀分配元素*/
		display: flex;
		overflow: hidden;
	}
	.tab{  
		width: 150rpx;
		height: 100%;

	}
	.tab-item{  
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	.active{  /* 选项卡活动时的样式 */
	    color:#F65959;
		font-size: 20px;
		background: #ffffff;
	}	
	
	/* 右边页面样式 */
	.right-box {
		left: 15%;
		width: 80%;
		background: #f6f6f6;		
	}
	
	.page-view {
		padding: 10rpx;
	}
	
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}
	
	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}
	
	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}
	
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
	
</style>

云开发的壁纸分享小程序
在这里插入图片描述

菜鸟驿站2020
关注
  • 3
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp购物类的顶部导航，scroll-view可指定滚动到指定位置，快来复制，省事
oh18845的博客
03-03 907
uniapp购物类的顶部导航，scroll-view可指定滚动到指定位置，快来复制，省事
uniapp 切换选项卡并请求不同数据
weixin_51603392的博客
05-08 1154
目录 1.把标题写在视图上 2.把标题写在return里 1.把标题写在视图上 <view class="head-left"> <view :class="index == 0 ? 'left-text' : 'left-title'" @click="load(0)">英皇</view> <view :class="index == 1 ? 'left-text' : 'left-title'" @click="load(1)...
uniapp获取云服务空间 数据
zzh990822的博客
01-04 1486
uniapp 关联云服务空间
uni-app学习笔记五（第5章项目实战：选项卡数据填充 ，数据请求的封装）
学习笔记
12-28 604
选项卡数据填充 1.创建云函数， 将上面返回的数据格式化一下， 那么，客户端应该怎么使用上面获取到的数据呢？ 如下，新建getLabel方法，通过get_label这个云函数名字来调用它， 下面是返回的结果，如果结果不对，需要再将云函数重新部署一下即可，就是右键点击，选择部署。 遇到的问题1： 遇到的问题2：uniCloud提示"应用未关联服务空间" 这个错误是在获取数据库中数据的时候，在网页调试界面里面报错的。重启hbuilder就好了。 如何将返回的数据传给页面。 新增
uniapp组件之tab选项卡滑动切换功能实现 vue2版本+vue3版本
最新发布
weixin_42220130的博客
06-03 982
uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧。
uniapp 顶部选项卡 TopTabBar
tengyuxin的博客
12-20 7136
在官网tabBar那里，只能自己手动实现 效果图如下 1. 项目结构 + home + mine + TopBar + TopBarComponent + guanzhu.vue + tuijian.vue 2. 实现TopTab的静态UI界面 （1）顶部选项卡的布局 --- 当前为TopBar页面 <template> <!-- 顶部选项卡 --> <view class="tabs"> <vi...
【 uniapp 】选项卡切换
zwj
10-01 2154
【 微信小程序 】选项卡切换
uniapp开发的考试答题类小程序.zip
11-25
本项目是一个基于uniapp开发的考试答题类小程序，主要包含单选题、多选题和判断题三种题型，提供了上一题、下一题的功能，但不涉及实际的交卷和后台交互，因此，数据是静态存储的，适用于学习和参考设计。...
基于uniapp微信小程序我的钱包页面
03-26
【基于uniapp微信小程序我的钱包页面】开发详解 在移动应用开发领域，微信小程序因其轻量化、便捷的特性，已经成为开发者的重要选择。而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、...
微信小程序uniapp银行卡卡片样式组件
05-09
【微信小程序】是腾讯公司推出的一种轻量级的应用开发平台...通过这个项目，开发者不仅可以掌握微信小程序和uniapp的基础知识，还能深入理解组件化开发、样式设计和数据管理等技能，对于提升整体开发能力具有重要意义。
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】
05-16
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小...
uni-app 封装一个顶部选项卡组件
04-24
uni-app 封装一个顶部选项卡组件
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
监听uniapp小程序页面滚动到底部实现数据加载
weixin_51523667的博客
03-29 2548
使用微信小程序自带的生命周期事件：onReachBottom，可以监听到页面滚动到底部的时候。2.在监听到页面滚动到底部时，修改页数，调用获取数组的方法并配合组件修改状态至加载中。修改获取数据的分页页数，配和uniapp组件加载更多，就可以实现下拉加载刷新的过程。3.获取到新数据通过concat方法添加到原本的数据就完成了。1.在data中初始化分页的页数。
uniapp自带的Loading加载效果，消息提示框，模态框，超简单实现
热门推荐
陈新科的博客
07-27 3万+
//显示加载框 uni.showLoading({ title: '加载中' }); ​ //隐藏加载框 uni.hideLoading(); 是不是超级简单啊，这就是uniapp自带的加载弹窗，不用下载任何东西哦 ...
uni-app实现选项卡功能
xybhua的博客
02-14 2388
原理很简单，就是点击切换内容。
uni-app 顶部选项卡吸附效果 demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
08-02 490
uni-app 顶部选项卡吸附效果 demo
uniapp 之 tab栏 切换数据渲染不同状态
HQ\(^o^)/的博客
11-27 1622
前面讲解些 tab栏是如何切换的，那下面就给大家演示下它们的状态是怎么切换过来的，很简单上面就是最终的效果图最开始时，后端把全部订单的所有数据，包含一些状态都返给我了，我开始想的，是通过 先过滤数组，找到自己需要的状态对应的数组，然后把那个数组传递给tab栏切换到对应的页面，通俗一点就是，把已完成状态的数组，传递给已完成那个组件，进而渲染已完成的数据，但，最终发现，这样一些的话，要 C全部订单的 样式，写起来有些麻烦，
uniapp编写tab选项卡
qq_41617901的博客
11-21 3371
项目演示结果： 项目结构： 项目代码 1.index.vue <template> <div id="app"> <tabs :currentIndex="currentIndex" @changTab="changeTabHandler"> <tab tabName="tab1" index="1"> <div>内容1</div> </ta..
uniapp 开发小程序 滚动页面 顶部导航栏透明变白色
07-13
对于uniapp开发的小程序，你可以通过以下步骤来实现滚动页面时顶部导航栏的透明变白色： 1. 在App.vue中设置全局的顶部导航栏样式： ```css <style> .nav-bar { background-color: transparent; color: #ffffff; } </style> ``` 2. 在每个页面的.vue文件中，监听滚动事件并动态修改顶部导航栏的样式： ```html <template> <view> <!-- 这里是页面内容 --> </view> </template> <script> export default { onScroll(e) { // 获取滚动距离scrollTop const scrollTop = e.detail.scrollTop; // 设置滚动距离阈值，超过该值则将导航栏背景颜色设为白色，否则设为透明 const threshold = 100; // 获取导航栏节点 const navBar = uni.createSelectorQuery().select('.nav-bar'); if (scrollTop > threshold) { navBar.css('background-color', '#ffffff'); navBar.css('color', '#000000'); } else { navBar.css('background-color', 'transparent'); navBar.css('color', '#ffffff'); } }, onPageScroll(e) { this.onScroll(e); }, onReachBottom() { // 页面滚动到底部的时候触发加载更多 } } </script> <style> /* 这里是页面样式 */ </style> ``` 在上述代码中，通过监听页面滚动事件`onPageScroll`和调用`onScroll`方法来实现改变导航栏样式的效果。根据滚动距离设置导航栏的背景颜色，当滚动距离超过阈值时，将导航栏背景颜色设为白色，否则设为透明。请注意，需要将`.nav-bar`替换为你实际使用的顶部导航栏的class或id。 这样就可以实现滚动页面时顶部导航栏的透明变白色的效果了。希望能对你有所帮助！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值