Swiper写出带有标题和文字内容的slide且布局和自适应不受文字内容的影响
1.正常做出自适应的slide
2.把slide文字内容与分页器放在同一个盒子里,分页器 绝对定位(设置bottom) ,文字内容正常设置为block(靠文字内容撑开父盒子,且分页器可以一直居于最下方,并且文字换行不会影响整体布局)
3.使用swiper内置方法 slideChangeTransitionEnd 在初始化和切换时可以触发。并通过this.activeIndex获取到当前slid的下标
4.设置内容数组,将要展示的slide的Text内容提前保存到数组中
5.通过下标获取到对应要展示的slidtext的文字并通过js方法替换innerHtml,来达到视觉上的文字切换效果
如果标题文字过多,同理也可使用该方法写出复用性高的轮播图组件

浙公网安备 33010602011771号