做微信公众号时,移动端滑动效果(swiper插件(display:none))显示滑动问题
微信公众号的制作,其中缺少不了希望实现标题、内容、图片的滑动效果,
这时候可以选择使用(swiper插件)实现相应效果,功能十分强大,链接:http://www.swiper.com.cn/;
最近做一款公众号时,在实现功能时遇到一难点,废了九牛二虎之力,终于在一高人的帮助下解决了。
1、问题描述:
原本该滑动项是隐藏的(display:none;),滑动项的代码是参考swiper插件文档内容而写,
通过按钮点击之后该滑动项显示(dispay:block),再进行左右滑动效果时,始终显示swiper-slider项的width:0;
故而导致没有效果出来。
2、解决方案:
(1)在本身元素 或者父元素 显示出来 然后调用swiper实例 ;
(2) observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
备注:代码如下(添加一监听事件):
var swiper2 = new Swiper('.swiper-container2', {
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
});