swiper菜鸟教程（小程序用swiper为什么会有卡顿的问题）
本文目录
小程序用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=“{{tabItem.content}}“ 》...{{item.name}}....《/block》
《/swiper-item》
《/block》“。content不为空什么都不做。这样就搞定了！！！
原因：这样做了以后,swiper-item只会渲染一次，除了你第一次切换tab时需要加载数据，其他时候都直接切换已经渲染好的swiper-item,就不会出现卡顿现象了，如果你解决了问题，就点赞吧，让更多人看见。。。菜鸟一枚，轻喷。。。
如何用HTML+css做出下面这种的轮播的方式，参考的时国立古宫博物馆网站
这个效果的图片轮播挺普遍的，推荐个插件swiper.js，当然网上很多这类型的插件，或者你可以自己写一个，网上教程也挺多的，这里就不罗嗦了，思路不明可以问。
补充个案例：（下面代码复制过去就能用了，文中有两个地方要引入文件，由于百度不给发链接，所以自行下载替换吧）
《!DOCTYPE html》《html lang=“en“》
《head》
《meta charset=“utf-8“》
《title》Swiper demo《/title》
《meta name=“viewport“ content=“width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1“》
《!-- Link Swiper’s CSS --》
《link rel=“stylesheet“ href=“../dist/css/swiper.min.css“》
《!-- Demo styles --》
《style》
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
《/style》
《/head》
《body》
《!-- Swiper --》
《div class=“swiper-container“》
《div class=“swiper-wrapper“》
《div class=“swiper-slide“》Slide 1《/div》
《div class=“swiper-slide“》Slide 2《/div》
《div class=“swiper-slide“》Slide 3《/div》
《div class=“swiper-slide“》Slide 4《/div》
《div class=“swiper-slide“》Slide 5《/div》
《div class=“swiper-slide“》Slide 6《/div》
《div class=“swiper-slide“》Slide 7《/div》
《div class=“swiper-slide“》Slide 8《/div》
《div class=“swiper-slide“》Slide 9《/div》
《div class=“swiper-slide“》Slide 10《/div》
《/div》
《!-- Add Pagination --》
《div class=“swiper-pagination“》《/div》
《/div》
《!-- Swiper JS --》
《script src=“../dist/js/swiper.min.js“》《/script》
《!-- Initialize Swiper --》
《script》
var swiper = new Swiper(’.swiper-container’, {
pagination: ’.swiper-pagination’,
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30
});
《/script》
《/body》
《/html》
更多文章：
2026年10月15日 12:00
windows程序设计第五版（《WINDOWS程序设计》和《WINDOWS核心编程》的区别）
2026年10月15日 11:30
issued retroactively（FORM E上盖“ISSUED RETROACTIVELY”的问题，小女在线等待）
2026年10月15日 10:30
2026年10月15日 10:10
begin和start的区别（start与begin的区别）
2026年10月15日 09:20
vant官网中文（范特365 是韩国化妆品VANT36.5吗）
2026年10月15日 09:10
2026年10月15日 08:10
2026年10月15日 07:30
prison break（越狱（prison break）到底是在讲个什么）
2026年10月15日 06:50
c程序设计第五版教学视频（求C程序设计（第五版）谭浩强教材源代码、视频课件等电子版资料！谢谢大家！）
2026年10月15日 06:40
