（1）輪播圖 react-slick 的使用，但是頁面中有其他定時器的時候，輪播圖不滾動
npm install react-slick

import Carousel from "react-slick";

const settings = { 
speed: 200, 
autoplay: true,
 dots: false, 
infinite: true, 
slidesToShow: 1,   //一頁展示幾條數據
 slidesToScroll: 1,
 vertical: true, 
verticalSwiping: true,
 arrows: false }

 <div style={{backgroundColor:'white',width:275,borderBottomLeftRadius:5,borderBottomRightRadius:5, height: 105, paddingTop: 2,overflow: 'hidden'}}>
          {this.state.users &&<Carousel {...settings}>
             {this.state.users.map((item,index) => {
               return(
                   <div style={{width:275}} key={index}>
                         <div style={{display: 'flex',flexDirection:'row',width:275,paddingLeft:10,paddingRight:10,paddingTop:5,paddingBottom:5,alignItems:'center'}}>
                     <img style={{width:24,height:24}} src={item.headImg} />
                          <span style={{color:'#333333',fontSize:12,marginLeft:8}}>{item.phone}</span>
                           <span style={{color:'#333333',fontSize:12,marginLeft:8}}>{item.content}</span>
                           <span style={{color:'#EE4634',fontSize:12,marginLeft:8}}>{item.amountYuan}</span>
                  </div>
{index < this.state.users.length -1 && <div style={{width:275,height:1,backgroundColor:'#FFF9E7'}}/> }
                                    </div>
                                )
                            })}
                        </Carousel>}
                    </div>

（2）想要輪播滾動雷恃，要用 antd-mobile

npm install antd-mobile

import { Carousel } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
const settings = {
         speed: 100,
         autoplay: true,
         dots: false,
         infinite: true,
         slidesToShow: 3,
         slidesToScroll: 1,
         vertical: true,
         verticalSwiping: true,
         arrows:false,
     }

<div style={{ marginLeft: '5%', height: 160, overflow: "hidden"}}>
   {firstBannerList&&firstBannerList.length>0?
       <Carousel {...settings}>
          {firstBannerList.map((item,index) => {
             return(
                   <div style={styles.scrollTextdiv} key={index}>
                         <img style={{ width: 26, height: 26, borderRadius: 13 }} src={item.thumb} />
                          <div style={{display:'flex', flexDirection: 'row', width: '99%', marginLeft: 5, alignItems: 'center', flex: 1 }}>
                                 <p style={{ color: '#333333', fontSize: 11, lineHeight: 13 }}>{item.itemName}</p>
                                 <p style={{ color: '#333333', fontSize: 11, marginLeft: 5, lineHeight: 13 }}>{item.targetPageUrl} </p>
                                  <p style={{ color: '#FF0000', fontSize: 12, lineHeight: 13 }}>{item.targetPageTitle}</p>
                                </div>
                             </div>
                                     )
                                 })}
                        </Carousel>
                         :null
                         }
                     </div>

const styles = {
scrollTextdiv: {
     display: 'flex',
     height: 34,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
     paddingTop:10
     // overflow: 'hidden'
 },
}