uni-app订单详情页导航栏交互

最新推荐文章于 2024-06-20 13:41:59 发布

小夏同学呀

最新推荐文章于 2024-06-20 13:41:59 发布

阅读量856

点赞数 10

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/web5219/article/details/135704806

版权

自定义导航栏交互

导航栏左上角按钮：获取当前页面栈，如果不能返回上一页，按钮变成返回首页。
导航栏动画效果：滚动驱动的动画，根据滚动位置而不断改变动画的进度。

::: warning 注意事项

滚动驱动的动画目前仅支持微信小程序端，暂不支持 H5 端、App 端，多端兼容时添加条件编译
在这里插入图片描述
参考代码

<script setup lang="ts">
// 获取页面栈
const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any

// 页面渲染完毕，绑定动画效果
onReady(() => {
   
  // 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar', // 选择器
    [{
    backgroundColor: 'transparent' }, {
    backgroundColor: