zhangrl
zhangrl
  • 发布:2023-09-19 09:51
  • 更新:2023-09-19 13:46
  • 阅读:373

【报Bug】uniapp转抖音小程序 频繁切换tabbar 页面不能点击或者不渲染

分类:uni-app

产品分类: uniapp/小程序/字节跳动

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

第三方开发者工具版本号: 4.1.3

基础库版本号: 2.95.0.1

项目创建方式: HBuilderX

示例代码:
//无渲染数据页面  
<view class="profile-banner profile-banner-order">  
            <view  
              class="pb-item pb-item-order"  
              v-for="(item, index) in data.items"  
              :key="index"  
              @tap="goPage(item.url)"  
            >  
              <image  
                :src="item.img"  
                mode="aspectFit"  
                style="width: 92rpx; height: 92rpx"  
              ></image>  
              <text class="text">{{ item.name }}</text>  
              <text class="tips" v-if="item.num > 0">{{ item.num }}</text>  
            </view>  
          </view>  

const data = reactive({  
  nearbyFarm: [],  
  items: [  
    {  
      name: "商城订单",  
      url: "/pagesComm/profile/order?type=shop",  
      num: 0,  
      img: shopOrder,  
    },  
    {  
      name: "1订单",  
      url: "/pagesComm/profile/order?type=rz",  
      num: 0,  
      img: rzOrder,  
    },  
  ],  
])  

//tabbar  
 <template v-slot:gFooter>  
        <view class="footer">  
          <view  
            class="footer-item"  
            v-for="(item, index) in data.bottomTools"  
            :key="index"  
            @tap="urlJump(item)"  
          >  
            <image  
              :src="  
                $App.ossImage(  
                  item.name === '我的' ? item.focusIcon : item.icon  
                )  
              "  
              class="footer-item-image"  
              :style="item.scale ? `transform: scale(${item.scale})` : ''"  
            ></image>  
            <view  
              class="footer-item-name"  
              :style="  
                item.name === '我的' ? 'color: #906A43;font-weight: bold' : ''  
              "  
              >{{ item.name }}</view  
            >  
          </view>  
        </view>  

      </template>  

const urlJump = (item: axj.DtDTools) => {  
 //这里只做页面跳转,数据都是写死的  
};

操作步骤:

扫码 体验版打开,反复切换tabbar

预期结果:

正常切换

实际结果:

不能切换,或者页面不渲染

bug描述:

自定义了一个tabbar组件,iphone8 抖音极速版 扫码体验版 点击tabbar切换页面
本地真机没有此问题,安卓没有测出这个问题

1、用uni.navigateTo跳转,多次跳转后,页面卡住,不能再点击切换按钮(详见录屏视频)
2、改用uni.redirectTo和uni.reLaunch,页面多次切换页面不渲染,渲染数据是静态资源全是写死的(看图片截图)

2023-09-19 09:51 负责人:无 分享
已邀请:
z***@163.com

z***@163.com - 御风

tabbar 跳转一般是用 uni.switchTab,如果只是一个 tabbar效果,而非真实的tabbar(页面的一个最底部导航组件),渲染方式可以换一种思路,比如把数据存储在vuex中,如果请求了不在刷新,这样是否可以实现

  • zhangrl (作者)

    自定义tabbar ,页面本事就是静态数据,没有涉及接口请求的

    2023-09-19 11:17

zhangrl

zhangrl (作者)

临时解决方案是,写个一百毫秒定时器,再做redirectTo 跳转

要回复问题请先登录注册