uni-app中uView自定义tabbar在支付宝小程序上出现错位问题，以前没错位的项目现在也开始错位，如何解决？

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app中uView自定义tabbar在支付宝小程序上出现错位问题，以前没错位的项目现在也开始错位，如何解决？

自定义tabbar以组件形式引入页面，自定义tabbar组件

<template>  
    <view>  
        <u-tabbar v-model="current" :list="tabarList" :mid-button="false" active-color="#0081ff" inactive-color="#606266"></u-tabbar>  
    </view>  
</template>  

<script>  
    export default {  
        name: "bottomBar",  
        data() {  
            return {  
                tabarList: [  
                    {  
                        iconPath: "home",  
                        selectedIconPath: "home-fill",  
                        text: '首页',  
                        customIcon: false,  
                        pagePath: '/pages/index/index',  
                    },  
                    {  
                        iconPath: "account",  
                        selectedIconPath: "account-fill",  
                        text: '我的',  
                        customIcon: false,  
                        pagePath: '/pages/userInfo/index',  
                    },  
                ],  
                current: 0,  
            };  
        }  
    }  
</script>  

<style>  

</style>

首页引入后发生错位，仅首页发生错位，其他页面正常，删除pages.json的tabbar配置项正常显示，配置tabbar项首页自定义tabbar会被顶起，且pages.json中tabbar设置文字会被显示出来。

image image image image


Harmonyos Next教程
6 回复

博主最后怎么解决的


怎么解决呢

不知道现在回复还有没有帮助，pages.json按下面的配置我这边就没有那个现象了。 “tabBar”: { “selectedColor”: “#FF6666”, “list”: [ { “pagePath”: “pages/index/index”, “text”: “”, “iconPath”: “”, “selectedIconPath”: “” }, { “pagePath”: “pages/userInfo/index”, “text”: “”, “iconPath”: “”, “selectedIconPath”: “” } ] },

支付宝小程序的话，每次进入tab页面onshow的时候手动调用uni.hideTabbar 隐藏一次tabbar就行

另外一种解决方式，我这边用组件包装的，直接在组件的顶层view写内联样式style="position: absolute;bottom: 0;"就行

在uni-app中使用uView自定义tabbar时遇到支付宝小程序上的错位问题，通常是由于样式兼容性问题或组件布局更新导致。以下是一些可能的解决方案，主要通过代码调整来尝试解决错位问题。

1. 确认uView版本

首先，确保你使用的uView版本是最新的，因为新版本可能已经修复了一些已知的兼容性问题。

# 更新uView
npm update uview-ui

2. 自定义tabbar样式调整

在支付宝小程序中，你可能需要特别调整tabbar的样式，确保其在不同设备上的兼容性。

示例代码：

在pages.json中配置自定义tabbar：

"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    },
    // 其他tab项配置...
  ],
  "custom": true,
  "position": "bottom"  // 确保位置正确
}

在App.vue中引入自定义tabbar组件：

<template>
  <App />
  <u-tabbar v-if="!$mp.weixin" />  <!-- 支付宝小程序不使用微信原生tabbar -->
</template>

<script>
import uTabbar from '@/components/uview-ui/u-tabbar/u-tabbar.vue';

export default {
  components: {
    uTabbar
  }
}
</script>

3. 支付宝小程序特定样式修复

针对支付宝小程序，你可以添加一些特定的样式修复。

示例代码：

在App.vue或自定义tabbar组件的样式文件中添加：

/* 针对支付宝小程序的样式调整 */
#alipay {
  .u-tabbar {
    bottom: 0; /* 确保tabbar始终在底部 */
    width: 100%; /* 确保tabbar宽度正确 */
    /* 其他可能需要的样式调整 */
  }
}

并在main.js或App.vue中动态添加支付宝小程序的特定类名：

if (process.env.PLATFORM === 'alipay') {
  document.body.classList.add('alipay');
}

4. 调试和测试

最后，使用支付宝开发者工具进行调试和测试，确保tabbar在不同设备和屏幕尺寸上都能正确显示。

通过上述方法，你可以尝试解决uni-app中uView自定义tabbar在支付宝小程序上的错位问题。如果问题依旧存在，建议查看uView的官方文档或社区，看是否有其他开发者遇到并解决了类似的问题。

回到顶部