swiper中的slider里面的元素怎么换行

2019/2/22

indexwxml文件

indexjs文件

数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致swiper不显示的问题。

解决：

indexwxml 中在swiper中绑定current

indexjs 中增加current

epreventDefault()意思是阻止默认事件执行，比如点击超链接，默认事件就是跳转页面。如果在超链接点击事件中调用该方法，就不会再执行跳转页面。

tabsSwiperactiveIndex是获取当前激活的tab的索引，用来判断是那个tab在显示。

$("tabs a")eq(tabsSwiperactiveIndex)addClass('active') 这句话应该是判断第几个轮播图显示，然后激活对应的轮播图下方的指示小圆点之类的元素。

github地址： >

1、首先把Swiper的开发包下载下来。然后查看下demo的格式，发现是一个三层结构，加一个分页swiper-pagination（这个可有可无），然后通过 new Swiper初始化。

2、项目中只需要把css和js引入即可。

3、然后通过代码循环加载swiper-slide结构的，因为目前程序中只有4张，所以下面单独加了两张。

4、设置45视图模式，JS直接给赋值成45即可，new Swiper('#home2',{slidesPerView: 45})。

5、最后实现效果图，就完成了。

关于swiper轮播图不显示，但是实际又占了位置（图一）。原因目前也不是很清楚，但只需要删

除appwxss里的样式display: flex即可，或者自己重写样式覆盖appwxss的样式在引用重写的样式

即可(图二)。

最近在做一个uniapp的项目的时候，碰到了一个Tab选项卡的需求，我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。

但是很遗憾，我并没有光看就会的本事，本着遇事不决先百度的原则，就在百度找了一篇真实有用，但是有小小bug的，下面是原po地址：

uni-app使用swiper切换页面每个滑块高度自适应

懒得点的可以接着往下看哈，我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图

首先就是Tab选项卡的点击切换块，这里我是用了小程序自带的scroll-view来实现的，同时给该元素添加scroll-into-view属性来实现点击跟踪（其实这效果不是特别好，我期望的效果是点击这个的时候还留点位置给上一个，但是我太菜了加上为了省事所以就直接用这个了）

scroll-into-view的用法可自行查阅官方文档

接着是swiper标签块，这里因为实现都一样，所以我就直接把原博客那边的贴过来了，大家根据自己的需求更改类名及swiper-item内部的组件即可

这里有个注意点，就是要给swiper-item内部的组件(盒子)一个相同的类名，后面获取高度时需要用到。

初始数据方面，这里我也把我的初始数据贴出来，大家根据需求自行修改即可

后面的方法本来想一个个贴的，但是发现好像有点乱，所以就直接全贴出来了，里面的逻辑大伙应该能理清吧哈哈

到这里js部分也结束了，最后是css部分，我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题，也就是

因此大家在初始化css数据的时候需要注意一下，这里我也把我的初始css贴出来，大家根据需求自行修改即可

到这里这一块的内容就全部结束了，噢对了关于setSwiperHeight里面获取dom元素的方法，也就是

unicreateSelectorQuery() 。这玩意说实话我也搞不太懂，总之就跟selectorQuery选择器差不多，CVM大法：复制粘贴，然后修改数据即可。

第一次正经写文还是很紧张的哈哈，希望能帮到有需要的人。谢谢各位

以上就是关于swiper中的slider里面的元素怎么换行全部的内容，包括:swiper中的slider里面的元素怎么换行、swiper怎么当到当前页时才加载css动画、微信小程序--swiper中current问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！