Swiper组件中Swiper.Item组件位置异常

[rexjz]

测试Swiper组件时，Sipwe.Item的位置位于屏幕之外

js:

import * as React from "react";
import {Image, View} from 'remax/wechat';
import styles from './clubs.css';
import {Swiper as AnnarSwiper} from "annar";


export default class ClubsPage extends React.Component {
    render(){
        return(
            <View className={styles.clubsPage}>
                <AnnarSwiper autoplay = 'true' autoplayInterval = '3000'
                             height='300px'
                             size = 'middle'
                             showIndicators='true'
                             shape = 'sharp'
                >
                    <AnnarSwiper.Item className={styles.SwiperItem}>
                        <Image style = 'height:100%;width:100%'src ="/images/test.png"/>
                    </AnnarSwiper.Item>
                    <AnnarSwiper.Item >
                        <Image style = 'height:100%;width:100%' src ="/images/test.png"/>
                    </AnnarSwiper.Item>
                </AnnarSwiper>
            </View>
        )
    }
}

css:

.clubsPage{
    background-color: #8FCAF7;
}

.SwiperItem{
    height: 100px;
    width:300px;
}

渲染后只有外框:

观察页面wxmal排错时发现Swiper.Item位于屏幕之外:

将异常的属性强行改成100px后Swiper.Item回到屏幕内部，但是排列仍有异常，不符合横向轮播的排列

[AnnaSearl]

不需要给SwiperItem设置宽度哦，SwiperItem会自动填满父元素（Swiper）的哦