解决办法：在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="{{tabItem.content}}" >...{{item.name}}....</block>
</swiper-item>
</block>"。content不为空什么都不做。这样就搞定了！！！
原因：这样做了以后,swiper-item只会渲染一次，除了你第一次切换tab时需要加载数据，其他时候都直接切换已经渲染好的swiper-item,就不会出现卡顿现象了，如果你解决了问题，就点赞吧，让更多宏模人看见。。。菜鸟一枚，轻喷。。。
swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。
配置握森 circular="true" 属性开启衔接滑动，即播放到末尾后重新回到开头段唯亩。然后固定用于展示的swiper-item只设置3个，当滑动时山模候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。
//页面源码
1、swiper-item的key一定要设置，并且用 index 。
2、如果只有一张情况，不想让它来回滚动。可以设置 circular ，但是 circular 无法直接动态设置，我们可以使用 computed 来设置
https://gitee.com/xiaoguoyao/uni-app
1、首先需要打开HBuilderX开发工具，创建一个Web项目，并将swiper插件对应的CSS和JavaScript文件拷贝到项目中。
2、然后新建一个静态页面，然后扒老将swiper插件的文游此源件神态引入到页面中。
3、接着在<body></body>标签中，插入多个div标签并设置class属性。
4、利用类选择器和伪类选择器nth-child，设置几个div标签的样式。
5、调用jquery初始化函数，对swiper插件进行初始化，设置autoplay属性。
6、最后保存代码并运行项目，打开浏览器查看界面效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）