uniapp tabbar点击转换图片

在uniapp中，可以通过设置tabbar的midButton属性来实现tabbar导航栏中间的发布按钮设置为大图标，并通过调用uni.onTabBarMidButtonTap实现页面跳转。具体实现方法如下：

1. 在App.vue文件中，使用uni.onTabBarMidButtonTap方法监听发布按钮的点击事件，并在回调函数中使用uni.navigateTo方法进行页面跳转。示例代码如下：

uni.onTabBarMidButtonTap(function() {
  uni.navigateTo({
    url: '/pages/circle/circle'
  })
})

2. 在index.vue文件中，可以使用canvas画布将图标画到tabbar对应位置上，并监听点击事件进行页面跳转。示例代码如下：

methods: {
  createtab: function() {
    // 设置水平居中位置
    var leftPos = Math.ceil((plus.screen.resolutionWidth - 50) / 2);
    var view = new plus.nativeObj.View('icon', {
      bottom: '19px',
      left: leftPos + 'px',
      width: '50px',
      height: '50px'
    });
    // 使用canvas画布把图标画到tabbar对应位置上
    view.drawBitmap(bitmap, {
      tag: 'font',
      id: 'icon',
      src: '/static/app-tabber/app-tabber.png',
      position: {
        top: '0px',
        left: '5px',
        width: '50px',
        height: '100%'
      }
    });
    // 监听界面跳转
    view.addEventListener("click", function(e) {
      uni.switchTab({
        url: '/pages/circle/circle'
      })
    }, false);
    view.show();
  }
}

通过以上方法，你可以实现在uniapp中点击tabbar按钮进行图片转换和页面跳转的功能。
#### 引用[.reference_title]
- *1* *3* [uniapp 实现tabBar图标凸起的两种方式（App端）](https://blog.csdn.net/weixin_45788691/article/details/107672635)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [【uni-app】app界面TabBar中间大图标设置的两种方法：midButton的使用；iconfont的使用](https://blog.csdn.net/aDiaoYa_/article/details/131124857)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]