Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swiper轮播图当同级元素发生变化就会产生bug #7147

Closed
without-yy opened this issue Jul 24, 2020 · 10 comments · Fixed by #7250 or #7257
Closed

swiper轮播图当同级元素发生变化就会产生bug #7147

without-yy opened this issue Jul 24, 2020 · 10 comments · Fixed by #7250 or #7257
Labels
F-react Framework - React P-1 High, patch T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Milestone

Comments

@without-yy
Copy link

相关平台

微信小程序

复现仓库

https://codesandbox.io/s/twilight-hill-pvfrh?file=/src/App.js
小程序基础库: 2.11.3
使用框架: React

复现步骤

点击页面上当按钮

期望结果

轮播图正常运行

实际结果

轮播图无法使用

环境信息

👽 Taro v3.0.5


  Taro CLI 3.0.5 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.4.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.5 => 3.0.5 
      @tarojs/mini-runner: 3.0.5 => 3.0.5 
      @tarojs/react: 3.0.5 => 3.0.5 
      @tarojs/runtime: 3.0.5 => 3.0.5 
      @tarojs/taro: 3.0.5 => 3.0.5 
      @tarojs/webpack-runner: 3.0.5 => 3.0.5 
      babel-preset-taro: 3.0.5 => 3.0.5 
      eslint-config-taro: 3.0.5 => 3.0.5 
      react: ^16.10.0 => 16.13.1 


补充信息

import React, { useState } from "react";
import { Swiper, SwiperItem, View, Button } from "@tarojs/components";


export default function Demo() {

  const [eleVisible, setEleVisible] = useState(false)

  return (
    <View>
      <Swiper>
        <SwiperItem style={{ height: '200px', background: '#ccc' }}>1</SwiperItem>
        <SwiperItem style={{ height: '200px', background: '#ccc' }}>2</SwiperItem>
        <SwiperItem style={{ height: '200px', background: '#ccc' }}>3</SwiperItem>
      </Swiper>

      {
        eleVisible && <View> 点击一次按钮轮播图就会出问题 </View>
      }

      <Button onClick={() => setEleVisible(!eleVisible)}>切换显示</Button>

    </View>
  )
}


@taro-bot2 taro-bot2 bot added F-react Framework - React T-weapp Target - 编译到微信小程序 V-3 Version - 3.x labels Jul 24, 2020
@feiren200
Copy link

feiren200 commented Jul 24, 2020

遇到了同样的问题,是SwiperItem的样式没了。
临时解决方案
image

@Chen-jj Chen-jj added this to the 3.0.7 milestone Jul 30, 2020
@Chen-jj Chen-jj added the P-1 High, patch label Aug 3, 2020
@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 3, 2020

#6995

@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 3, 2020

微信小程序初次渲染会合并用户为 SwiperItem 设置的 style 属性,和轮播需要的 translate 样式。之后再次设置 SwiperItem 的 style 则不会再被合并,而是直接覆盖。

Taro 应该只初始化 SwiperItem 的 style,后续不再为它 setData。开发者也应不动态设置 SwiperItem` 的样式,可以通过修改它的子元素样式来处理。

<SwiperItem>
  <View style="xxx"></View>
</SwiperItem>

@fred8617
Copy link
Contributor

fred8617 commented Aug 5, 2020

@Chen-jj 去掉style后支付宝小程序彻底不好使了

@slipkinem
Copy link

@Chen-jj 到底要怎么弄呢?

@missmimia
Copy link
Contributor

这个问题解决了吗

@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 14, 2020

@slipkinem 还有什么问题?

@onweer
Copy link

onweer commented Apr 6, 2021

如何自定义指示点样式?

@toFrankie
Copy link
Contributor

可以考虑设置「标签选择器」,但如果内联样式中含有的属性,需添加 important 权重以覆盖,所以最好都加上。

比如:

swiper-item {
  height: 200px !important;
}

@lidom1
Copy link

lidom1 commented Apr 26, 2022

看了一下 回答都没生效,
image

在红框外层包一个 view标签 即可解决

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React P-1 High, patch T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
None yet
9 participants