Swiper current设置后不更新问题



  • Swiper设置current后在H5端值不更新是哪的问题?```
    code_text

    import Taro, { Component } from '@tarojs/taro'
    import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
    // import { connect } from '@tarojs/redux'
    import { AtSegmentedControl } from 'taro-ui'
    
    
    import './dbanner.scss'
    
    
    class Banner extends Component {
    
    
      state = {
        current : 0,
        list: [{
    			"backgroundColor": "2a2217",
    			"img": "https://yanxuan.nosdn.127.net/ec57acdb11e9c65d361267195f2b2de8.jpg",
    			"rank": 1,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fyou.163.com%2Ftopic%2Fv1%2Fpub%2FKAmXjEWWmhTl.html"
    		}, {
    			"backgroundColor": "002a42",
    			"img": "https://yanxuan.nosdn.127.net/1bcda063c3de758c49f9b3129d75c58e.jpg",
    			"rank": 2,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F2y1GHJEwSE7M.html"
    		}, {
    			"backgroundColor": "a32425",
    			"img": "https://yanxuan.nosdn.127.net/af3c24e60b04bf506544dd98fd3cb453.jpg",
    			"rank": 3,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F80UiMHb8W7Ub.html"
    		}, {
    			"backgroundColor": "c74750",
    			"img": "https://yanxuan.nosdn.127.net/cea3a93f42cddf55e8511caaf4eba799.jpg",
    			"rank": 4,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2FDisKHkXqufXpABy.html"
    		}]
      }
    
      config = {
        navigationBarTitleText: '详情'
      }
    
      handleClick (value) {
        this.setState({
          current: value
        })
      }
    
    
      
      render () {
        const { current } = this.state;
        return (
    
          <View className='home-banner'>
            <Swiper
              className='home-banner__swiper'
              current={current}
            >
              {this.state.list.map(item => (
                <SwiperItem
                  key={item.rank}
                  className='home-banner__swiper-item'
                >
                  <Image
                    className='home-banner__swiper-item-img'
                    src={item.img}
                  />
                </SwiperItem>
              ))}
            </Swiper>
          
            <View className='swiper-label'>
              {current}/{this.state.list.length}
            </View>
            
          </View>
          
        )
      }
    }
    
    export default Banner


  • @amdiqqq

    import Taro, { Component } from '@tarojs/taro'
    import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
    // import { connect } from '@tarojs/redux'
    import { AtSegmentedControl } from 'taro-ui'
    
    
    import './dbanner.scss'
    
    
    class Banner extends Component {
    
    
      state = {
        current : 0,
        list: [{
    			"backgroundColor": "2a2217",
    			"img": "https://yanxuan.nosdn.127.net/ec57acdb11e9c65d361267195f2b2de8.jpg",
    			"rank": 1,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fyou.163.com%2Ftopic%2Fv1%2Fpub%2FKAmXjEWWmhTl.html"
    		}, {
    			"backgroundColor": "002a42",
    			"img": "https://yanxuan.nosdn.127.net/1bcda063c3de758c49f9b3129d75c58e.jpg",
    			"rank": 2,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F2y1GHJEwSE7M.html"
    		}, {
    			"backgroundColor": "a32425",
    			"img": "https://yanxuan.nosdn.127.net/af3c24e60b04bf506544dd98fd3cb453.jpg",
    			"rank": 3,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2F80UiMHb8W7Ub.html"
    		}, {
    			"backgroundColor": "c74750",
    			"img": "https://yanxuan.nosdn.127.net/cea3a93f42cddf55e8511caaf4eba799.jpg",
    			"rank": 4,
    			"type": 3,
    			"content": "/pages/webview/index?url=https%3A%2F%2Fact.you.163.com%2Fact%2Fpub%2FDisKHkXqufXpABy.html"
    		}]
      }
    
      config = {
        navigationBarTitleText: '详情'
      }
    
      handleClick = (value) => {
        console.log('v:', value)
        this.setState({
          current: value
        })
      }
    // 更新当前帧
      onChange = (e) => {
        this.setState({
          current: e.detail.current
        })
        console.log(e)
      }
    
      
      render () {
        const { current } = this.state;
        return (
    
          <View className='home-banner'>
            <Swiper
              className='home-banner__swiper'
              current={current}
              onChange = {this.onChange}
            >
              {this.state.list.map(item => (
                <SwiperItem
                  key={item.rank}
                  className='home-banner__swiper-item'
                >
                  <Image
                    className='home-banner__swiper-item-img'
                    src={item.img}
                  />
                </SwiperItem>
              ))}
            </Swiper>
          
            <View className='swiper-label'>
              {current}/{this.state.list.length}
            </View>
            <Button onClick={this.handleClick.bind(this, 2)}>设置为第 3 帧</Button>
          </View>
          
        )
      }
    }
    
    export default Banner
    
    
    

登录后回复