reactnative轮播图组件(循环滚动卡⽚,垂直跑马灯效果)react-native-ezswiper
安装
$ npm install react-native-ezswiper --save
使⽤
引⽤
import EZSwiper from 'react-native-ezswiper';
demo效果图:
1 卡⽚轮播 (源码有中⽂⽂档具体参数⾃⼰参考)
<EZSwiper //设置属性
style={{width: Kscreen_width,height:KH(160),backgroundColor: 'white'}}
//添加图⽚数据(下⾯是四张)
dataSource={['pic1','pic2','pic3','pic4']}
//Item的⼤⼩
width={ Kscreen_width }
height={KH(160)-KH(10)*2}
//Item的样⼦
renderRow={this._renderRow}
//是否循环
loop={true}
//Item点击事件
onPress={this._onPressRow}
//Item缩放⾼数设置
cardParams={{cardSide:Kscreen_width-KW(36)*2, cardSmallSide:KH(150)-KW(15)*2,cardSpace:0}} />
2 垂直跑马灯
<EZSwiper
style={{width: Kscreen_width-KW(40),height: KH(30),marginLeft:KW(10)}}
dataSource={['监督举报热线:400-000-0000', '提额+免息进⾏时!' ,'每邀请⼀⼈,奖励50']}
width={ Kscreen_width-KW(40)}
height={KH(30)}reactnative开发
renderRow={this._renderEZSwiperRow}
loop={true}
//⽔平滚动关闭垂直滚动打开
horizontal={false}
//滚动时间
autoplayTimeout={4}
onPress={this._onPressRow}
/********************* 垂直滚动 也可以⼿动滑动 这时候我们需要关闭********************/
scrollEnabled={false}
/>
1.1关闭⼿动滚动1 去到 EZSwiper ⾥⾯私⾃添加属性.默认是为true 滚动
2 添加到⽅法
3 给ScrollView 加属性 (参考horizontal这个参数)
这样就实现了关闭⼿动滚动了! 如果没有关闭是这样的!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论