uniapp:tabBar点击后设置动画效果

这篇具有很好参考价值的文章主要介绍了uniapp:tabBar点击后设置动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

APP端不支持dom操作,也不支持active伪类,绞尽脑汁也没办法给uniapp原生的tabBar点击加动画效果,所以最终只能舍弃原生tabBar,改用自定义tabBar。

自定义tabBar的原理是,页面的上部分分别是tabBar对应的页面组件,下部分是固定在底部的tabBar,通过点击tabBar获取到当前索引,然后通过v-if来判断显示哪个页面组件,跟原生tabBar不同的是,这里仅用一个page,所以在pages.json里只需要注册index页面即可,在router里也只需要设置index即可,同时也要注意,其他页面组件并不是一个页面,所以没有onShow,onLoad等方法,可以通过computed和watch来达到类似效果,也可以使用vue原生的生命周期,比如create,mounted这些。

index页面的完整代码:

<template>
	<view>
		<home v-if="PageCur=='home'" />
		<orders v-if="PageCur=='orders'" />
		<messages v-if="PageCur=='messages'" />
		<find v-if="PageCur=='find'" />
		<my v-if="PageCur=='my'" :userInfo="userInfo"/>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view :class="PageCur=='home'?activeColor:defaultColor" @click="NavChange" data-cur="home">
					<view class='cuIcon-homefill' :class="PageCur=='home'?'animation-bounce':''"></view>主页
				</view>
				<view :class="PageCur=='orders'?activeColor:defaultColor" @click="NavChange" data-cur="orders">
					<view class='cuIcon-formfill' :class="PageCur=='orders'?'animation-bounce':''"></view>订单
				</view>
				<view :class="PageCur=='messages'?activeColor:defaultColor" @click="NavChange" data-cur="messages">
					<view class='cuIcon-commentfill' :class="PageCur=='messages'?'animation-bounce':''"></view>消息
				</view>
				<view :class="PageCur=='find'?activeColor:defaultColor" @click="NavChange" data-cur="find">
					<view class='cuIcon-explorefill' :class="PageCur=='find'?'animation-bounce':''"></view>发现
				</view>
				<view :class="PageCur=='my'?activeColor:defaultColor" @click="NavChange" data-cur="my">
					<view class='cuIcon-myfill' :class="PageCur=='my'?'animation-bounce':''"></view>我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { USER_INFO } from "@/common/util/constants"
	export default {
		data() {
			return {
				defaultColor: 'action text-gray',
				activeColor: 'action text-red',
				PageCur: 'home',
				userInfo: {},
				
			};
		},
	onLoad: function() {
			this.PageCur = 'home';
			this.userInfo = uni.getStorageSync(USER_INFO);
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;

			}

		}
	}
</script>

<style scoped lang="scss">

</style>

在view的data-cur属性里设置每个tab的key,通过点击事件可以获取这个key,比如当key等于home时,通过动态类设置被选中的颜色,同理,给icon设置一个animation-bounce类,这个类是控制动画效果的,已经提前写在一个animation.css文件里了,这种动画效果的css文件网上很多,可以自己找一下,icon会被放大1.4倍,然后恢复。

@-webkit-keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

最终效果:

uniapp点击动画效果,uni-app,前端

参考文章:uniApp混合开发小程序实现自定义底部tab仿绿洲APP动画效果_uniapp的tabbar图标变化可以动画吗_湫沐椿风的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-719626.html

到了这里,关于uniapp:tabBar点击后设置动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue/Uni-app/微信小程序 v-if 设置出场/退出动画(页面交互不死板,看起来更流畅)

    天梦星服务平台 (tmxkj.top) https://tmxkj.top/#/ 在Vue.js中,使用 v-if 进行条件渲染时设置动画可以通过 transition 组件来实现。 具体操作步骤如下: 包裹条件渲染的元素 :您需要将要通过 v-if 控制显示隐藏的元素包裹在 transition 标签内。 命名过渡效果 :给 transition 标签添加 name 属

    2024年04月28日
    浏览(37)
  • uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮 1693289945724.png // 常用颜色 // d81e06 紅 // #f4ea2a 黃 // #1afa29 綠 // #1296db 藍 // #13227a 青 // #d4237a 紫 // #ffffff 白 // #2c2c2c 黑

    2024年02月09日
    浏览(57)
  • uni-app动态tabBar,根据不同用户展示不同的tabBar

    因为我们用的是uni-app框架开发,所以在创建项目的时候直接创建uni-ui的项目即可,这个项目模板中自带了uni的一些好用的组件和api。 起初我想着这个效果不难实现,因为官方也有api可以直接使用,所以我最开始尝试就是使用uni的api完成,也就是这个 :uni.setTabBarItem(options) 我

    2024年02月09日
    浏览(46)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab: 跳转列表不会刷新 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 uni.reLaunch: 跳转列表会刷新 关闭所有页面,打开到应用内的某个页面。( 可以跳转到tabBar 页面 ) 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(51)
  • uni-app教程一(项目创建、tabbar配置、运行

    导入静态资源包(图片) 页面tabbar配置 { “pages”: [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “首页” } }, { “path”: “pages/news/news”, “style”: { “navigationBarTitleText”: “动态

    2024年04月23日
    浏览(48)
  • uni-app 实现凸起的 tabbar 底部导航栏

    效果图 在 pages.json 中设置隐藏自带的 tabbar 导航栏 新建一个 custom-tabbar.vue 自定义组件页面 底部安全区域的适配问题可查看:uni-app 苹果手机底部安全区域的适配问题 在 main.js 中引用组件 在要用到的页面中直接调用

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

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

    2023年04月08日
    浏览(73)
  • uni-app 中两个系统各自显示不同的tabBar

    最近在一个 uni-app 项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的 tabBar 页面,但是在 uni-app 项目中 pages.json 中的 tabBar 的 list 数组只有一个,且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义 tabBar 。 目录 1、我们确定在

    2024年04月13日
    浏览(48)
  • 解决uni-app小程序原生tabbar 添加阴影问题

    下面是实现的效果  步骤1 创建一个组件  文件名和组件名要一致  步骤2  在组件中实现阴影效果 步骤3 在tabbar 页面使用  直接使用 即可 不用引入  

    2024年02月07日
    浏览(62)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(62)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包