做微信公众号时，移动端滑动效果（swiper插件（display：none））显示滑动问题

Posted 2020-10-16 彭

    　微信公众号的制作，其中缺少不了希望实现标题、内容、图片的滑动效果，

这时候可以选择使用（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
　　　　});