swiper 使用体验
首先是实例化swiper
这里有一个注意点,就是实例化的时机
如果你的swiper内容是写死的,可以在componentDidMount中实例化,但是如果你的内容是通过接口异步请求过来的,就必须在componentDidUpdate里实例化,因为如果在 componentDidMount 中实例化,异步请求过来的内容可能还没有挂载完就实例化就会出现问题
1 | componentDidUpdate(){ |
这里还用到了一个知识点,就是单例模式,因为componentDidUpdate会多次执行,所以使用单例模式避免生成多个实例
1 | initialBannerSwiper =()=>{ |
鼠标划入停止轮播
swiper居然没有这个api来控制,好吧 只能自己来用js来控制了
bannerSwiper.$el
swiper的container的Dom7/jQuery对象
Swiper4自带有DOM7库,因此无需另外加载Jquery等库即可对Dom7对象使用以下常用的DOM操作
this.bannerSwiper.$el[0]就可以拿到 实例的container的dom节点
1 | hoverStop = ()=>{ |
你可能还会遇到一个小问题
这也是我遇到的,那就是鼠标划到轮播图的时候点击轮播图 会偶尔出现切换的情况,swiper有一个属性可以控制 shortSwipes ,官方描述是这样的
默认允许短切换。设置为false时,只能长切换,进行快速且短距离的滑动无法触发切换。
为什么会出现这种情况呢,因为swiper是专注于移动端的,划上swiper点击的时候可能鼠标方向偏了一点,swiper会以为你是手机上的滑动,设置为false时,短距离的滑动就不会发生切换了,下面是官方的说法
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
最后
记得在组件卸载的时候解绑事件和销毁swiper实例~
componentWillUnmount(){
if(this.bannerSwiper){
this.bannerSwiper.detachEvents()
this.bannerSwiper.destroy()
}
}
swiper真的强大,了解更多请参考 swiper 文档