react-liuziyao
v1.0.7
Published
## swiper滑动 ``` import {swiper} from 'react-liuziyao' new swiper('swiper',{ // swiper为class AutomaticRotary:true, //true为自动轮播,fasle为默认值 RotaryTime:3000, //true为自动轮播,fasle为默认值 navShow:true, //是否显示导航跟随,flase为默认值 });
Downloads
9
Readme
npm install --save react-liuziyao
swiper滑动
```
import {swiper} from 'react-liuziyao'
new swiper('swiper',{ // swiper为class
AutomaticRotary:true, //true为自动轮播,fasle为默认值
RotaryTime:3000, //true为自动轮播,fasle为默认值
navShow:true, //是否显示导航跟随,flase为默认值
});`
.swiper{
height: 2.4rem;
background: #ffffff;
}
<div className='swiper'>
<div className={`wangsheng-swiper-container`}>
<div className="swiper-slide">
第一页
</div>
<div className="swiper-slide">
第二页
</div>
</div>
</div>
```
移动端轮播图
import {CreateRoundMap} from 'react-liuziyao'
new CreateRoundMap("CreateRoundMap",{
img:[
'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg',
'http://p1.so.qhmsg.com/bdr/_240_/t01a3aca2447ac47246.jpg'], //指定轮播图片
scrollDirection:"top", //滚动方向 //默认left(必须小写)
// AutoPlay:false, //默认为true 自动播放轮播图
AutoPlayTime:1500, //默认为3000 自动播放时间
// NavOnShow:false, // 默认为true显示状态 导航跟随
});
#CreateRoundMap{
width: 100%;
height: 120px;
}
<div id="CreateRoundMap"></div>
京东放大镜
import {fangdajing} from 'react-liuziyao'
new fangdajing('div1',{
SpanWidth:"150px",SpanHeight:"150px", //默认宽高100px;
SpanBackground:"red",SpanOpacity:"0.2", //默认为黄色 0.5透明度
fangdakuangWidth:"350px",fangdakuangHeight:"350px", //(取景框)默认为1.2倍
fangdakuangWeizhi:'top', //(取景框方向)默认为right
fangdakuangImgWidth:"1000px",fangdakuangImgHeight:"1000px", //(img)默认为两倍缩放
});
<div id="div1"> <img src="b1.jpg"> </div>
发布订阅模式(用于组件通讯)
import SubscribePublishing from "./SubscribePublishing";
let SubPub = new SubscribePublishing
SubPub.Subscribe('qqq',(data1,data2)=>{ /* 订阅事件 */
console.log(data1,data2)
})
SubPub.Publishing('qqq',1,2,3,4,5) /* 发布事件 */