Taro: swiper-item 元素会在跳转然后返回时丢失样式,导致只显示第一个 swiper-item

Created on 8 Jun 2020  ·  4Comments  ·  Source: NervJS/taro

问题描述

当页面没有数据请求时不会发生这种问题

以下描述的问题 只在 页面存在复杂数据请求时 会出现

当 swiper-item 所在页面没有固定定位 或 绝对定位元素时,页面首次挂载时 swiper-item 正常。

当 swiper-item 所在页面存在固定定位 或 绝对定位元素时,页面首次挂载时 swiper-item 只能显示第一个,其他错位,显示空白.

当 swiper-item 所在页面没有固定定位 或 绝对定位元素时,当swiper-item 所在页面跳转,然后返回 swiper-item 所在页面后,swiper-item 的样式全部丢失,导致只有第一个 swiper-item 可以显示,其他 swiper-item都会发生错位导致显示空白.

复现步骤

swiper-item 所在页面存在 多项数据请求[我使用了 apollo ,由于是第三方库,没有包裹 app ]

从 swiper-item 所在页面跳转到其他页,然后返回

期望行为

从 swiper-item 所在页面跳转到其他页,然后返回, swiper-item 全部显示正常,非空白

报错信息

以下为正常情况下的 swiper-item 样式
2081591600148_ pic

以下为跳转页面再次返回 swiper-item 所在页面时 swiper-item 的样式[样式丢失]
2091591600183_ pic

系统信息

 Taro v3.0.0-beta.5


  Taro CLI 3.0.0-beta.5 environment info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 13.12.0 - /usr/local/bin/node
      npm: 6.14.4 - ~/.npm-global/bin/npm
    npmPackages:
      @tarojs/components: 3.0.0-beta.5 => 3.0.0-beta.5 
      @tarojs/taro: 3.0.0-beta.5 => 3.0.0-beta.5 
      @tarojs/taro-weapp: ^2.2.3 => 2.2.3 
      @tarojs/webpack-runner: 3.0.0-beta.5 => 3.0.0-beta.5 
      eslint-config-taro: 3.0.0-beta.5 => 3.0.0-beta.5 
      react: ^16.10.0 => 16.13.1

补充信息

根据相关的 swiper-item issue ,我采取了 以下措施试图解决,但都未解决问题:

1:useDidShow 不做任何操作

2:每次 useDidShow 更新 swiper-item key 为全新值

3:每次 useDidShow 重新请求数据 以重新渲染 swiper-item

Most helpful comment

微信有这个问题动态更新swiper,更新的swiper-item显示空白

暂时可以将@tarojs/shared/dist/index.js文件中

if (compName !== 'block') {
    Object.assign(newComp, styles, isAlipay ? alipayEvents : events);
}

改为

if (compName !== 'block' && compName !== 'swiper-item') {
    Object.assign(newComp, styles, isAlipay ? alipayEvents : events);
}

All 4 comments

同样有此问题,swiperItem变化时,只有第一个swiperItem正常,其他的错位
3.0.0-rc.4

3.0.0-rc.4 同有此问题,页面出现固定定位元素后又移除会导致swiperItem出现错位并且内容有部分消失了,希望能尽快解决,生产上有需要

微信有这个问题动态更新swiper,更新的swiper-item显示空白

暂时可以将@tarojs/shared/dist/index.js文件中

if (compName !== 'block') {
    Object.assign(newComp, styles, isAlipay ? alipayEvents : events);
}

改为

if (compName !== 'block' && compName !== 'swiper-item') {
    Object.assign(newComp, styles, isAlipay ? alipayEvents : events);
}

这个问题有解决吗?,现在3.0.5问题依然存在

Was this page helpful?
0 / 5 - 0 ratings