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

taro 3.0 中使用swiper时,图片追加问题 #7976

Closed
wuyingyi opened this issue Nov 5, 2020 · 0 comments
Closed

taro 3.0 中使用swiper时,图片追加问题 #7976

wuyingyi opened this issue Nov 5, 2020 · 0 comments
Assignees
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Milestone

Comments

@wuyingyi
Copy link

wuyingyi commented Nov 5, 2020

相关平台

H5

浏览器版本: Chrome 版本 86.0.4240.111(正式版本) (x86_64)
使用框架: React

复现步骤

先给swiper数组list定义3张图片,然后再动态追加图片, 在state查看到list追加成功后,小程序上轮播图正常追加渲染图片,h5轮播图未成功渲染追加图片。

期望结果

帮助解决

实际结果

h5存在问题

环境信息

Taro CLI 3.0.11 environment info:
    System:
      OS: macOS High Sierra 10.13.3
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.15 => 3.0.15 
      @tarojs/components: 3.0.15 => 3.0.15 
      @tarojs/mini-runner: 3.0.15 => 3.0.15 
      @tarojs/react: 3.0.15 => 3.0.15 
      @tarojs/runtime: 3.0.15 => 3.0.15 
      @tarojs/taro: 3.0.15 => 3.0.15 
      @tarojs/webpack-runner: 3.0.15 => 3.0.15 
      babel-preset-taro: 3.0.15 => 3.0.15 
      eslint-config-taro: 3.0.15 => 3.0.15 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3

补充信息

如描述不清楚可联系咚咚:wuyingyi,谢谢。

相关代码:
import React, { Component } from 'react'
import { View, Text, Swiper, SwiperItem } from '@tarojs/components'

let num = 4
export default class SildeBox extends Component {
constructor(props) {
super(props)
this.state = {
showImageSwiper: true,
list: [1, 2, 3]
}
}

handleChange = (e) => {
console.log('--e', e)
let { list } = this.state
list.push(num )
this.setState(list)
}

render() {
return (
<Swiper
className='test-h'
indicatorColor='#999'
indicatorActiveColor='#333'
vertical
circular
indicatorDots
onAnimationFinish={e => this.handleChange(e)}
autoplay>
{this.state.list.map(i => {
return
{i}

})}

  </Swiper>
)

}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
Archived in project
Development

No branches or pull requests

3 participants