热门
join now

uniapp切换tab栏显示不同页面并记住页面位置和上拉获取新数据

技术教程4周前更新 云程
118 0 0

1.切换不同的tab栏实现代码:

<scroll-view class="menus" scroll-x :show-scrollbar="false">				   <view class="item" :class="{active:activeNum === index}" v-for="(item, index) in menuList" :key="index"					@click="toMenu(index, item)">					{{item}}				</view>
</scroll-view>

uniapp切换tab栏显示不同页面并记住页面位置和上拉获取新数据

2.不同tab和页面绑定使用的是自定义组件,组件里套用的uview的u-list

uniapp切换tab栏显示不同页面并记住页面位置和上拉获取新数据

3. 核心代码:为每一个tab都渲染一个MenuList组件

<MenuList v-for="(item, index) in menuNumList" v-show="activeNum === item" :menuName="menuName"> </MenuList>

要想每个tab记住自己的位置,并且切换回去之后,还是原来的位置,相互tab之间不影响,就得让每一个tab都拥有自己的容器来展示自己的数据,并且只有这样才能记住自己的位置

4.至于上拉触底之后获取新数据,在uview中u-list已经有封装好的方法可以使用:@scrolltolower=”scrolltolower”,因为页面滚动导致不确定滚动的元素是哪个,可以用下面这篇文章来定位:js确定滚动元素和解决tab切换滚动位置独立

uview中的列表使用方法: List 列表 | uView 2.0 – 全面兼容nvue的uni-app生态框架 – uni-app UI框架

这里还要注意,要给u-list和父标签news添加高度,不然这个scrolltolower方法可能不会起作用:

我封装好的MenuList组件代码:

<template>	<view class="news">		<u-list class="new-list" @scrolltolower="scrolltolower" lowerThreshold="150">			<u-list-item>				<text class="title">菜单新闻列表---{{menuName}}</text>			</u-list-item>			<u-list-item class="new-item" v-for="(item, index) in articleList" :key="index">				<view :class="{'new-content': item.imgList.length === 1}">					<view class="new-title" :class="{'title-three':item.imgList.length === 1}">						{{item.title}}					</view>					<view class="new-imgs" v-if="item.imgList.length > 0">						<image :src="imgUrl" mode="scaleToFill" v-for="(imgUrl, index) in item.imgList" :key="index"							class="pre-img" :class="{'one-img':item.imgList.length === 1}">						</image>					</view>				</view>				<view class="new-info">					<text class="info">{{item.author}}</text>					<text class="info">{{item.commites}}评论</text>					<text class="info">{{item.timer}}小时前</text>				</view>			</u-list-item>		</u-list>	</view></template><script>	export default {		data() {			return {				articleList: [{						title: "使用uni-app提供的scroll-view组件",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/539ee665a9a7bfc58303467aa27421fe.jpeg",							"https://img-blog.csdnimg.cn/img_convert/083a2793a43d8d5e464cdaf84920f44f.jpeg",							"https://img-blog.csdnimg.cn/img_convert/31e1bedc46adf2d5448f18dfd60e0b70.gif"						],						author: "人民日报",						commites: "100",						timer: "10"					},					{						title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能",						imgList: [],						author: "葫芦芥子博客",						commites: "16",						timer: "8"					},					{						title: "当然这时候还有力气和心思欣赏,应接不暇的辽阔与无暇的蓝",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",							"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",							"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"						],						author: "葫芦芥子博客",						commites: "36",						timer: "9"					},					{						title: "这样一座城市,面积不大,主要的街道似乎只有一条,早餐过后我们散步过去,却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门,还是只是我们的到访太早而已",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"						],						author: "葫芦芥子博客",						commites: "66",						timer: "1"					},					{						title: "稍远处有一处建在 灯塔 下的房车营地,倒是显得热闹一些。营地前的海滩上长满了荒草,海风吹来,一股萧瑟的咸腥味道",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",							"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",							"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"						],						author: "摄影基地",						commites: "23",						timer: "2"					},					{						title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能",						imgList: [],						author: "葫芦芥子博客",						commites: "16",						timer: "8"					},					{						title: "当然这时候还有力气和心思欣赏,应接不暇的辽阔与无暇的蓝",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",							"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",							"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"						],						author: "葫芦芥子博客",						commites: "36",						timer: "9"					},					{						title: "这样一座城市,面积不大,主要的街道似乎只有一条,早餐过后我们散步过去,却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门,还是只是我们的到访太早而已",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"						],						author: "葫芦芥子博客",						commites: "66",						timer: "1"					},					{						title: "稍远处有一处建在 灯塔 下的房车营地,倒是显得热闹一些。营地前的海滩上长满了荒草,海风吹来,一股萧瑟的咸腥味道",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",							"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",							"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"						],						author: "摄影基地",						commites: "23",						timer: "2"					},					{						title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能",						imgList: [],						author: "葫芦芥子博客",						commites: "16",						timer: "8"					},					{						title: "当然这时候还有力气和心思欣赏,应接不暇的辽阔与无暇的蓝",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",							"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",							"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"						],						author: "1024小神",						commites: "36",						timer: "9"					},					{						title: "这样一座城市,面积不大,主要的街道似乎只有一条,早餐过后我们散步过去,却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门,还是只是我们的到访太早而已",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"						],						author: "光明网",						commites: "66",						timer: "1"					},					{						title: "稍远处有一处建在 灯塔 下的房车营地,倒是显得热闹一些。营地前的海滩上长满了荒草,海风吹来,一股萧瑟的咸腥味道",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",							"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",							"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"						],						author: "摄影基地",						commites: "23",						timer: "2"					},					{						title: "这种切换不管是在app端仍是小程序或者H5页面都是很常见的功能",						imgList: [],						author: "葫芦芥子博客",						commites: "16",						timer: "8"					},					{						title: "当然这时候还有力气和心思欣赏,应接不暇的辽阔与无暇的蓝",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/7d12420bd3666d1b8b457858efbf69e3.jpeg",							"https://img-blog.csdnimg.cn/img_convert/4eccdc4270a2ba8d139907733b032705.gif",							"https://img-blog.csdnimg.cn/img_convert/d441d4c59a0f5541841986c74d0a97b7.gif"						],						author: "葫芦芥子博客",						commites: "36",						timer: "9"					},					{						title: "这样一座城市,面积不大,主要的街道似乎只有一条,早餐过后我们散步过去,却发现没有一间开始营业的店铺。不知道它们会一直这样紧闭大门,还是只是我们的到访太早而已",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/c89509758ce09b1357921c929604ed54.jpeg"						],						author: "葫芦芥子博客",						commites: "66",						timer: "1"					},					{						title: "稍远处有一处建在 灯塔 下的房车营地,倒是显得热闹一些。营地前的海滩上长满了荒草,海风吹来,一股萧瑟的咸腥味道",						imgList: [							"https://img-blog.csdnimg.cn/img_convert/132432af7aef388263ab33d45516596e.jpeg",							"https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg",							"https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"						],						author: "摄影基地",						commites: "23",						timer: "2"					}				]			}		},		props: {			menuName: {				default: "默认",				type: String			}		},		onPullDownRefresh() {			console.log("下拉刷新");			this.timer = setInterval(() => {				uni.stopPullDownRefresh()				clearInterval(this.timer)			}, 1000)			uni.showToast({				title: '数据已更新....',				duration: 2000			});		},		methods: {			scrolltolower() {				console.log("滚动到底部了");				uni.showToast({					title: '数据已更新....',					duration: 2000				});			}		}	}</script>

tab页代码:

<template>
	<view class="content">
		<!-- 头部菜单导航 -->
		<view class="navigate">
			<scroll-view class="menus" scroll-x :show-scrollbar="false">
				<view class="item" :class="{active:activeNum === index}" v-for="(item, index) in menuList" :key="index"
					@click="toMenu(index, item)">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<!-- 首页/菜单页 -->
		<Dashboard v-show="activeNum === 0"></Dashboard>
		<!-- 分类菜单展示:不同的菜单有不同的列表 -->
		<MenuList v-for="(item, index) in menuNumList" v-show="activeNum === item" :menuName="menuName"> </MenuList>
	</view>
</template>

<script>
	import Dashboard from "./components/Dashboard.vue"
	import MenuList from "./components/MenuList.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				activeNum: 0,
				menuName: "",
				timer: null,
				menuList: ["首页", "生活", "编程", "前端", "数据", "爬虫", "软件", "技术", "美图", "旅游"]
			}
		},
		onLoad() {},
		computed: {
			menuNumList() {
				var arr = new Array();
				for (var i = 1; i < this.menuList.length; i++) {
					arr.push(i)
				}
				return arr
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.timer = setInterval(() => {
				uni.stopPullDownRefresh()
				clearInterval(this.timer)
			}, 1000)
			uni.showToast({
				title: '数据已更新....',
				duration: 2000
			});
		},
		// onReachBottom() {
		// 	uni.showToast({
		// 		title: '首页onReachBottom数据已更新....',
		// 		duration: 2000
		// 	});
		// },
		components: {
			Dashboard,
			MenuList
		},
		methods: {
			toMenu(index, menuName) {
				this.activeNum = index;
				this.menuName = menuName
				console.log("当前激活index为", index);
			},
			isMenu(index) {
				console.log("index", index);
				if (this.activeNum === 0) {
					return false
				} else {
					console.log("activeNum", this.activeNum === index);
					return this.activeNum === index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 42px;

		.navigate {
			position: fixed;
			top: 44px;
			// #ifdef APP-PLUS
			top: 0px;
			// #endif
			background-color: #fff;
			z-index: 999;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			color: black;
			border-bottom: 1px solid #eee;

			.menus {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				white-space: nowrap;

				.item {
					text-align: center;
					display: inline-block;
					width: 100rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
					// margin-top: 3px;
				}

				.active {
					color: #f85959;
				}
			}
		}
	}
</style>

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...