uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)

这篇具有很好参考价值的文章主要介绍了uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

tab切换锚点效果及滚动时激活相应的tab

效果如下
  1. H5端

H5端tab切换及tab锚点效果

  1. 小程序端

小程序端tab切换及tab锚点效果文章来源地址https://www.toymoban.com/news/detail-768581.html

代码实现-重要几点
  1. 渲染页面循环数组时,每一个item都需要给不重复的id
//topicList后端返回的数据
<view :id="'a' + (i + 1)" v-for="(v,i) in topicList" :key="v.id">
  1. tab使用uviewUI库实现的,list值里面每一个元素也需要给上id值。如[‘1-20’,‘21-40’,…],那么21-40给的是第21个item的id。
    这里也可以去动态计算,如后端返回76条,一个tab数值间隔为20,那么76则是[‘1-20’,‘21-40’,‘41-60’,‘61-76’],注意数组的最后一个,结尾是76而不是80
<template>
	<u-tabs :list="tabList" :current="currentTab" @change="changeTab" :bar-style="{'bottom':'6rpx'}"></u-tabs>
</template>

// 根据后端返回数据总条数计算tab
getTopicTab() {
	// this.topicList.length这是渲染数据总条数,20是每个tab数值间隔值,cycleIndex则是针对数据总条数一共有几个tab
	let cycleIndex = Math.ceil(this.topicList.length / 20); // 向上取整6.01 -> 7
	let tabArr = [];
	for(let i = 1; i <= cycleIndex; i++) {
		tabArr.push({
			value: 20 * i,
			name: ((20 * (i - 1)) + 1) + '-' + (i == cycleIndex ? this.topicList.length : (20 * i)),
			id: '#a' + ((20 * (i - 1)) + 1)
		});
	};
	this.tabList = tabArr;
},
  1. 监听页面滚动周期onPageScroll,针对滚动时,该激活哪个tab。
  2. 接下来就是一些dom元素高度计算,使用uni.createSelectorQuery()获取JQ对象,然后使用select(id/class名).boundingClientRect获取当前id的item距离顶部的top值;根据顶部基准的top值和item的top值,之间的差值,通过uni.pageScrollTo滚动页面
  3. 计算高度值时,需要注意,顶部是否有其他dom元素,有也需要将该dom元素高度,考虑在内
    uniapp tab,JavaScript,Uniapp,uni-app,小程序
实现思路
  1. 进入页面时,循环渲染数据之后,获取每个tab对应item距离顶部的距离,用数组distanceArr存起来(后面会用到)。这个顶部以谁基准呢,以页面中最外层的view为基准。如上图,(H5端)最外层dom元素的class名为page-content(后面计算高度会用到),(wx小程序端)最外层dom元素的class名为page-risk
  2. 根据后端返回数据总条数,渲染数据,给每个item赋值不同的id。如上述 代码实现 的第1点
  3. 根据后端返回数据总条数,动态计算tab,渲染this.tabList。如上诉 代码实现 的第2点
  4. 点击tab,锚点到相应位置。在点击时拿到被点击item的index,this.tabList[index]这样就拿到了,当前被点击tab的数据(value,name,id)。计算dom高度:1).先获取顶部基准的top值,uni.createSelectorQuery().select(‘.page-risk’).boundingClientRect(data => { data.top });2).然后根据被点击tab的id,获取top值,然后根据差值,通过uni.pageScrollTo滚动页面到目标位置。(注意这里需要注意 代码实现 的第5点,顶部是否有其他dom元素,它们高度也需要计算在内,这里称为**偏移量**)
  5. 监听页面滚动周期onPageScroll事件,根据页面滚动激活相应的tab。这里使用到了第1点提到的数组distanceArr
全部代码
export default {
	data() {
		tabList: [], // 切题tab集合
		topicList: [], // 题库集合
		distanceArr: [], // 每道题ID对应的top值
		isTabChange: false, // 防止在点击tab的时候,页面的滚动导致重复计算、抖动问题
	},
	// 监听页面滚动
	onPageScroll (event) {
	    if (this.isTabChange) {
			return
	    };
	    const { scrollTop } = event;
	    // 偏移量,由于吸顶的tab、头部的显示信息也有高度,素以做了偏移量
	    // (这里是代码实现第5点及实现思路第4点提到的偏移量)
	    const skewY = 103;
	    if (scrollTop >= skewY) {
	        this.$nextTick(() => {
	        	// distanceArr-进入页面时第一时间获取每个tab对应item的top值集合
	            const length = this.distanceArr.length;
	            const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > skewY);
	            // 当index  == -1 的时候,实际当前滚动的距离超出了最大值,也就是在最后一个tab显示的内容
	            // 当index > 0 的时候,说明能在当前的scrollTop值找到,即index的前一位
	            // currentTab 0激活第一个切题tab  1第二个
	            this.currentTab = index > 0 ? index - 1 : length - 1;
	        })
	    }
	},
	methods: {
		// 获取题库
		getList() {
			this.topicList = []
		},
		// 根据this.topicList计算切题tab
		getTopicTab() {
			let cycleIndex = Math.ceil(this.topicList.length / 20); // 向上取整6.01 -> 7
			let tabArr = [];
			for(let i = 1; i <= cycleIndex; i++) {
				tabArr.push({
					value: 20 * i,
					name: ((20 * (i - 1)) + 1) + '-' + (i == cycleIndex ? this.topicList.length : (20 * i)),
					id: '#a' + ((20 * (i - 1)) + 1)
				});
			};
			this.tabList = tabArr;
		},
		// 获取每个tab对应item的top值集合('20-41'获取第21个item的top值)
		getDistanceArr () {
			const _this = this;
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				_this.tabList.map(el => {
					query.select(el.id).boundingClientRect(data => {
						// 获取当前ID距离顶部的top值
						if(!_this.distanceArr.includes(data.top)) {
							_this.distanceArr.push(data.top)
						}
					}).exec()
				})
			});
		},
		// 切题tab
		changeTab(index) {
			// 防止在点击tab的时候,页面的滚动导致重复计算、抖动问题
			// true时监听页面滚动生命周期代码则不执行
			this.isTabChange = true;
			this.currentTab = index;
			const _this = this;
			// this.$nextTick 保证当前isTabChange 为true后执行代码
			// 避免在istabChange变为true的时候,执行代码,监听事件还是会继续执行重新计算currenTab值
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				let id = _this.tabList[index].id;
				let dataTop;
				query.select(id).boundingClientRect(data => {
					dataTop = data.top;
				}).exec();
				query.select('.page-risk').boundingClientRect(res => {
					const scrollTop = dataTop - res.top // 获取差值
					const skewY = 103 // 偏移(顶部返回和切换题tab的高度及第一题magin/padding的和)
					// 页面开始进行滚动到目标位置
					uni.pageScrollTo({
						scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
						duration: 300,
						complete: function () {
							const timer = setTimeout(() => {
								_this.isTabChange = false // 关闭(放开对onPageScroll的限制)
								clearTimeout(timer)
							}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
						}
					});
				}).exec()
			})
		},
		// 这里业务是题库,所以当必填项没有填写时,就会锚点到该位置
		// 前提是需要将必填项且没有填写的item的id值传递过来
		getPageScrollTo(id) {
			const _this = this;
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				let index = '#a' + (id + 1);
				let dataTop;
				query.select(index).boundingClientRect(data => {
					dataTop = data.top;
				}).exec();
				query.select('.page-risk').boundingClientRect(res => {
					const scrollTop = dataTop - res.top; // 获取差值
					const skewY = 103; // 偏移
					// 页面开始进行滚动到目标位置
					uni.pageScrollTo({
						scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
						duration: 300,
					});
				}).exec()
			})
		},
	}
}

到了这里,关于uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 通过JavaScript、css、H5 实现简单的tab栏的切换和复用

    目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取

    2023年04月09日
    浏览(38)
  • 【微信小程序】实现页面tab切换效果

    目录 前言 本次效果展示 一、如何实现页面tab 1.使用内置组件scroll-view 2.实现点击时出现的背景样式 3.使用scroll-into-view,实现点击时自动滚动 本次主要内容是介绍页面tab的开发,如何实现tab与页面内容联动呢?关注我就知道!   如下图所示,我们需要使用到红色框框中的属

    2024年02月09日
    浏览(94)
  • uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序

    如果您是 Vue.js / Nuxt.js 等项目,请访问 这篇文章。 本文实现了 uniapp 全端兼容,在函数内用 JS 让一个元素(DOM),“重复执行” 写好的 CSS 动画,类似点赞动画一样, 你可以直接复制示例源码,稍微改改(写上你想要的动画,换个元素就行)就能应用到您的项目中去, 如下图

    2023年04月08日
    浏览(73)
  • uniapp小程序手写tab导航栏切换(点击切换样式,动态样式绑定)

    最近写uniapp,ui里面有一个导航栏切换的逻辑,因为要跟UI保持一致,对于组件库很难实现高度定制,所以这里就自己手写实现一个点击切换的导航栏。先看下图效果: 主要实现的是通过点击切换导航栏,并且样式有一个切换的效果,大家可以根据自己的需求进行样式的DIY

    2024年02月12日
    浏览(52)
  • uniapp实现扫码功能H5+APP+wx小程序

    1.首先uniapp初始化(需要引入 npm包 已经初始化就忽略吧) 2.终端执行(需要引入vue-qrcode-reader)//只适用于vue2版本 3 创建一个扫码页面(用于其他页面往此页面跳转) 4.manifest.json配置H5 1.直接创建扫码页面(用于其他页面往此页面跳转) wx小程序

    2024年02月13日
    浏览(52)
  • H5跳回小程序的wx.miniProgram.navigateTo不起效果,无法跳转页面,已解决

     需求:H5中的点击首页按钮跳回小程序的首页,就写了以下代码    结果并没有跳转成功,但是alert成功,于是查找资料,换了各种api比如switchTab,redirectTo都不行,找了好多博主的帖子发现都不行,问题肯定出在url上面,于是改成下面这样,就可以成功跳转了,不得不说啊

    2024年02月11日
    浏览(49)
  • uniapp图片上传与压缩,兼容小程序与H5

    图片上传借助了Uview2.0的组件 压缩代码

    2024年02月13日
    浏览(40)
  • uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换,丝滑切换视频效果,无限数据加载不卡顿

    一、项目背景 :实现仿抖音短视频全屏视频播放、点赞、评论、上下切换视频、视频播放暂停、分页加载、上拉加载下一页、下拉加载上一页等功能。。。 二、前言 :博主一开始一直想实现类似抖音进入页面自动播放当前视频,上下滑动切换之后播放当前视频,但最后在

    2024年02月11日
    浏览(43)
  • uniapp 上传压缩图片 兼容h5和小程序的方法

    项目是用uniapp开发的,当时只是做App端,后来项目扩展到H5端, uniapp框架可以跨平台所以移动端和H5使用的是一套代码 上传头像的时候要求图片的大小在2MB一下,所以要压缩图片,App端当时使用的是uni.compressImage(OBJECT)压缩的(详情见:https://uniapp.dcloud.net.cn/api/media/image.html#

    2024年04月17日
    浏览(33)
  • uniapp实现扫码功能兼容小程序和h5

    主要是针对h5端,uniapp自带的扫码方法不支持h5的 对于h5而言需要借助jweixin来实现,也就是微信的扫码功能 实现方式: 可通过npm安装 npm install jweixin-module 引入安装的npm包 import jweixin from \\\'jweixin-module\\\' 在onLoad方法中加载获取签名的方法 onLoad() {             this.wx_sanCode() }

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包