小程序用swiper为什么会有卡顿的问题

看了这么多忽悠人的回答，我忍不住了！！这个卡顿可能（我觉得是一定，怕你们喷）是swiper内部数据渲染导致的，如果你们的是如下写法时出现的，那请认真看我的这个说明：1是否在swier-item里是死数据时没出现卡顿，2当swiper-item的动态渲染，swiper-item下数据变化时卡顿。

解决办法：在data定义一个数组：arr:[];在获取到tab栏类目的时候动态添加对象到arr里，变成：arr[{num:0,content:[]}，{num:1,content:[]}],然后用arr去渲染swiper-item,content为swiper-item内部的数据。每当切换一个新的tab时，拿到tabindex（tabindex为tab栏切换或者滑动改变的值）在arr里找到对应位置，先检测一下对应位置的content是否为空（是否已经存过数据，不过这个在该tab下数据为空时不准确），为空时请求到的数据把它放到对应位置的content里，部分代码如下"

<block wx:for="{{arr}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx">

<swiper-item>

<block wx:for="{{tabItemcontent}}" >{{itemname}}</block>

</swiper-item>

</block>"。content不为空什么都不做。这样就搞定了！！！

原因：这样做了以后,swiper-item只会渲染一次，除了你第一次切换tab时需要加载数据，其他时候都直接切换已经渲染好的swiper-item,就不会出现卡顿现象了，如果你解决了问题，就点赞吧，让更多人看见。。。菜鸟一枚，轻喷。。。

swiper组件的current属性的作用是添加。

组件（Component）是对数据和方法的简单封装。C++Builder中，一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。VCL和CLX组件是C++Builder系统的核心。简而言之，组件就是对象。C++Builder中叫组件，Delphi中叫部件，而在VisualBASIC中叫控件。组件是对数据和方法的简单封装。C++Builder中，一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。

1、1：1触控运动 Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio） 2、触控模仿 这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件（点击以及拖曳滑块） 3、水平/垂直 Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直运动的滑动） 4、自由模式（Free Mode） 这种模式下能够让slides 无需定位，就像通常的滑动条。（看下面的例子） 5、旋转调整 （rotation/resize） Swiper 在移动设备旋转后能自适应尺寸。 6、响应式 能使用百分比的宽高定义slides,为移动端提供不同的解决方案。 7、滑动阻止 简单来说，就是，只能使用一种模式，水平或者垂直滑动。 8、抵抗反d（resistant bounds） Swiper能够提供一种机制，就是当滑动滑块超过最左以及最右（最上或最下）的位置时触发的一种抵御机制。 9、原生要素（native momentum） 有不少的原生东西提供给Swiper。 10、内建分页控制 Swiper能够快速生成内建的分页控制（pagination）,指定html 某一标签为pagination，Swiper就能做很多东西了。 11、自动播放 只用设置延迟时间，Swiper就会自动地轮播slides直到你触碰该滑块（touch）为止。 12、循环模式（Loop mode） 该种模式下，你能够无限滑动滑块，到最后一个之后会跳转回第一个。 13、旋转模式（Carousel mode） Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。 14、滑动容器 在该特征下能够使用Swiper在一些简单的能滑动的区域里，没有slides。在Apps里十分有用。 15、嵌套Swipers 能够将Swipers嵌套入各种不同的Swiper 的slide里，例如垂直的或水平的。 16、任意的HTML 标签 可以将任一的HTML 内容放到slide里，不止仅限于图像。 17、硬件加速 swiper 使用硬件加速技术（如果该移动设备支持的话）能够得到良好流畅的动画效果以及优美的外观，尤其是在IOS设备里。 18、丰富的API Swiper拥有丰富的API接口。（不过关于中文文档似乎不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮以及4个回调函数：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。 19、灵活的配置 Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）以及其他 20、插件API（Plugins API） Swiper从17版本开始就变得强大起来了，因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)（该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar） 21、良好的兼容性 Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 21+，windows Phone 8,以及最新版本的谷歌浏览器（Chrome），Safari，Firefox，IE10 以及欧朋浏览器（Opera） 22、老版本IE的兼容 Swiper 2x 开始，通过DOM动画，而非css transitions 兼容IE7 以上（需要包含jQuery），因为IE7不支持css3 transitions简单来说，支持IE7 以上版本。

在做一个移动端项目时，用swiper 做的页面切换，但是页面里面还会有swiper轮播图 和其他内容，在滑动外部swiper时，除开里面swiper的元素会发生闪动的情况。

解决方法：给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;

闪动元素/子元素：transform:translate3d(0,0,0)

这样就解决了页面闪动的问题

文章转自CSDN

以上就是关于小程序用swiper为什么会有卡顿的问题全部的内容，包括:小程序用swiper为什么会有卡顿的问题、swiper组件的current属性的作用是什么、为什么用swiper写的微信场景在微信上看尺寸不一样等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！