devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序swiper不限数量不卡顿轮播图优化组件（含uniapp版和纯微信开发者工具版），欢迎打包下载啦_swiper小程序

作者：weixin_40725706 | 2024-03-23 05:16:31

赞

踩

swiper小程序

兼容性：

        支持微信小程序平台，有uniapp框架版和纯微信小程序开发工具版。

问题：

       你也遇到微信小程序swiper里要放大量数据的需求了吗，刚开始觉得就循环往里放么，但是真实操作时会发现刚开始滑着还行，到后面就卡的动不了了？

肿么办：

        原理是实际渲染的列表里只放最多3个元素（这里考虑到如果list只有1个或2个或3个的情况） ，在每次切换后更换这3个元素为最新的3个。

调试花时间：

       已经有调试好的工具类了，你只需简单的引入和调用，无需关注实现过程，仅在合适的位置写自己的逻辑即可。

演示效果：

         微信扫一扫下方二维码查看演示效果：

        ​ 

演示页面截图：

​ ​​

  uniapp版代码调用示例： 

  1. <template>
  2. 	<view class="t-content">
  3. 		<!-- swiper示例 -->
  4. 		<swiper v-if="swiperList && swiperList.length>0" class="t-swiper" :duration="duration" :current="current"
  5. 			@animationfinish="itemChange">
  6. 			<swiper-item v-for="(item,index) in swiperList" :key="index">
  7. 				<!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //开始 -->
  8. 				<view class="t-item-con t-wh-100p" :style="{'background-image': 'url('+item.bgImg+')'}">
  9. 					<view class="t-item-title">{{item.title}}</view>
  10. 					<text class="t-item-desc">{{item.desc}}</text>
  11. 				</view>
  12. 				<!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //结束 -->
  13. 			</swiper-item>
  14. 		</swiper>
  15. 		<!-- 下面这个是为了演示快速跳转到某一个item -->
  16. 		<view class="t-leap-desc">
  17. 			注：上面swiper中共10000个带图片的item，点击下方序号快速跳转：
  18. 		</view>
  19. 		<view class="t-leap">
  20. 			<view @click="leapTo" data-num="9">9</view>
  21. 			<view @click="leapTo" data-num="99">99</view>
  22. 			<view @click="leapTo" data-num="999">999</view>
  23. 			<view @click="leapTo" data-num="1999">1999</view>
  24. 			<view @click="leapTo" data-num="2999">2999</view>
  25. 			<view @click="leapTo" data-num="3999">3999</view>
  26. 			<view @click="leapTo" data-num="4999">4999</view>
  27. 			<view @click="leapTo" data-num="5999">5999</view>
  28. 			<view @click="leapTo" data-num="6999">6999</view>
  29. 			<view @click="leapTo" data-num="7999">7999</view>
  30. 			<view @click="leapTo" data-num="8999">8999</view>
  31. 			<view @click="leapTo" data-num="9999">9999</view>
  32. 		</view>
  33. 	</view>
  34. </template>
  35.  
  36. <script>
  37. 	//这里引入封装的工具类方法，插件下载后含uniapp版和微信开发工具版工具类文件咯
  38. 	import { initSwiper, leapToItem, changeSwiperItem ,defaultParams } from '@/common/kevy-enhanced-swiper-1.0.js';
  39. 	//list -- swiper所有数据的存放列表
  40. 	//duration -- 初始化设置的过渡时间
  41. 	var { list, duration } = defaultParams;
  42. 	//测试图片背景，这块为了测试带图片且数据量大也不存在性能问题
  43. 	const bgImg = 'https://img-blog.csdnimg.cn/140a01b8ad3f46bb9b970fdd85433ebe.png';
  44. 	export default {
  45. 		data() {
  46. 			return {
  47. 				swiperList: [], //swiper实际列表，里面放的swiper-item数量为1-3个
  48. 				current: 0, //swiper实际列表（swiperList）中当前可以看到的那个swiper-item对应的下标，从0开始
  49. 				duration: duration, //swipper-item元素切换动画过渡时间
  50. 				currItemNo: 1 ,//当前显示的swiper-item在所有数据的存放列表（list）中的序号，例如总数量list里共10000条数据，currItemNo=150是指当前显示的是第150条数据
  51. 			}
  52. 		},
  53. 		onLoad() {
  54. 			//这里去请求所有数据，如果接口是分页的就多请求几次拿到所有数据，不存在性能问题
  55. 			// uni.request({
  56. 			// ...请求逻辑
  57. 			// () => { list = res.data.list }
  58. 			// })
  59. 			//这里模拟请求到了所有数据，例如10000条，然后放到list数组里
  60. 			for (let i = 0; i < 10000; i++) {
  61. 				list.push({
  62. 					bgImg: bgImg,
  63. 					title: "[第" + (i + 1) + "个元素]我是一个无限制数量高性能的swiper",
  64. 					desc: "A. [第" + (i + 1) +
  65. 						"个元素]实现原理：\n\nB. swiper里永远最多只放3个元素，\n\nC. 在swiper切换时根据原来的下标计算新的需要显示的item对应下标，\n\nD. 然后组装好新的最多3个item数据渲染到页面"
  66. 				});
  67. 			}
  68. 			//请求到所有数据后放到list变量里后，初始化swiper
  69. 			initSwiper(this, list, () => {
  70. 				//这里是初始化完后的回调，你可以写自己的逻辑了，例如拿到当前swiper-item
  71. 				console.log(this.swiperList[this.current]);
  72. 			});
  73. 		},
  74. 		methods: {
  75. 			/**
  76. 			 * swiper切换事件，这里监听的是切换完成动画事件
  77. 			 */
  78. 			itemChange(e) {
  79. 				changeSwiperItem(this, Number(e.detail.current), list, duration, () => {
  80. 					//切换完成
  81. 					//这里可以写自己的逻辑啦，例如去判断当前item是否收藏...
  82. 					console.log("切换完成，当前显示的是===", this.swiperList[this.current].title)
  83. 				});
  84. 			},
  85. 			/**
  86. 			 * 跳到第n个item数据，n为序号从1开始
  87. 			 */
  88. 			leapTo(e) {
  89. 				leapToItem(this, Number(e.currentTarget.dataset.num), list, duration, () => {
  90. 					//这里是跳完之后，此时页面已经显示第n个item了，
  91. 					//你可以在这里写自己的逻辑了，例如判断当前item是否收藏，是否错题...
  92. 					console.log("已经跳转到第" + Number(e.currentTarget.dataset.num) + "个item啦");
  93. 				});
  94. 			}
  95. 		}
  96. 	}
  97. </script>
  98.  
  99. <style lang="scss" scoped>
  100. 	.t-content {
  101. 		background-color: #f7f7f7;
  102. 		min-height: 100vh;
  103. 	}
  104.  
  105. 	.t-h-100p {
  106. 		height: 100%;
  107. 	}
  108. 	
  109. 	.t-hover{
  110. 		opacity: 0.7;
  111. 	}
  112.  
  113. 	.t-w-100p {
  114. 		width: 100%;
  115. 	}
  116.  
  117. 	.t-wh-100p {
  118. 		width: 100%;
  119. 		height: 100%;
  120. 	}
  121.  
  122. 	.t-swiper {
  123. 		width: 100%;
  124. 		box-sizing: border-box;
  125. 		height: 500rpx;
  126. 	}
  127.  
  128. 	.t-item-con {
  129. 		background-size: 100% 100%;
  130. 		background-repeat: no-repeat;
  131. 		display: flex;
  132. 		flex-direction: column;
  133. 		justify-content: flex-start;
  134. 		align-items: flex-start;
  135. 		padding: 30rpx;
  136. 		box-sizing: border-box;
  137. 	}
  138.  
  139. 	.t-item-title {
  140. 		font-size: 36rpx;
  141. 		color: #ffffff;
  142. 		font-weight: bold;
  143. 		text-align: justify;
  144. 	}
  145.  
  146. 	.t-item-desc {
  147. 		font-size: 28rpx;
  148. 		color: #ffffff;
  149. 		margin-top: 30rpx;
  150. 		text-align: justify;
  151. 	}
  152. 	
  153. 	.t-leap-desc {
  154. 		font-size: 28rpx;
  155. 		width: 690rpx;
  156. 		margin: 60rpx auto 0rpx;
  157. 		color: black;
  158. 	}
  159.  
  160. 	.t-leap {
  161. 		width: 663rpx;
  162. 		height: 100rpx;
  163. 		margin: 0 auto;
  164. 		box-sizing: border-box;
  165. 		padding: 15rpx;
  166. 		display: flex;
  167. 		flex-direction: row;
  168. 		justify-content: flex-start;
  169. 		align-items: center;
  170. 		flex-wrap: wrap;
  171. 	}
  172.  
  173. 	.t-leap view {
  174. 		font-size: 24rpx;
  175. 		color: #fff;
  176. 		padding: 15rpx;
  177. 		background: #42b983;
  178. 		border-radius: 10rpx;
  179. 		width: 57rpx;
  180. 		height: 30rpx;
  181. 		text-align: center;
  182. 		line-height: 30rpx;
  183. 		margin: 10rpx;
  184. 	}
  185. </style>

纯小程序开发工具版有么：

        当然是有了，一切尽在插件包里，包括下方的代码及工具类文件哦。

微信小程序版调用示例：

index.wxml代码：

  1. <view class="t-content">
  2.   <!-- swiper示例 -->
  3.   <swiper wx:if="{{swiperList && swiperList.length>0}}" class="t-swiper" duration="{{duration}}" current="{{current}}" bindanimationfinish="itemChange">
  4.     <swiper-item wx:for="{{swiperList}}" wx:for-item="item" wx:key="index" wx:for-index="index">
  5.       <!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //开始 -->
  6.       <view class="t-item-con t-wh-100p" style="background-image: url({{item.bgImg}});">
  7.         <view class="t-item-title">{{item.title}}</view>
  8.         <text class="t-item-desc">{{item.desc}}</text>
  9.       </view>
  10.       <!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //结束 -->
  11.     </swiper-item>
  12.   </swiper>
  13.   <!-- 下面这个是为了演示快速跳转到某一个item -->
  14.   <view class="t-leap-desc">
  15.     注：上面swiper中共10000个带图片的item，点击下方序号快速跳转：
  16.   </view>
  17.   <view class="t-leap">
  18.     <view bindtap="leapTo" data-num="9">9</view>
  19.     <view bindtap="leapTo" data-num="99">99</view>
  20.     <view bindtap="leapTo" data-num="999">999</view>
  21.     <view bindtap="leapTo" data-num="1999">1999</view>
  22.     <view bindtap="leapTo" data-num="2999">2999</view>
  23.     <view bindtap="leapTo" data-num="3999">3999</view>
  24.     <view bindtap="leapTo" data-num="4999">4999</view>
  25.     <view bindtap="leapTo" data-num="5999">5999</view>
  26.     <view bindtap="leapTo" data-num="6999">6999</view>
  27.     <view bindtap="leapTo" data-num="7999">7999</view>
  28.     <view bindtap="leapTo" data-num="8999">8999</view>
  29.     <view bindtap="leapTo" data-num="9999">9999</view>
  30.   </view>
  31. </view>

 index.js代码：

  1. //这里引入封装的工具类方法，在插件包里有微信开发工具版工具类
  2. import { initSwiper, leapToItem, changeSwiperItem, defaultParams } from '../../common/kevy-enhanced-swiper-wx-1.0.js';
  3. //list -- swiper所有数据的存放列表
  4. //duration -- 初始化设置的过渡时间
  5. var { list, duration } = defaultParams;
  6. //测试图片背景，这块为了测试带图片且数据量大也不存在性能问题
  7. const bgImg = 'https://img-blog.csdnimg.cn/140a01b8ad3f46bb9b970fdd85433ebe.png';
  8. Page({
  9.  
  10.   /**
  11.    * 页面的初始数据
  12.    */
  13.   data: {
  14.     swiperList: [], //swiper实际列表，里面放的swiper-item数量为1-3个
  15.     current: 0, //swiper实际列表（swiperList）中当前可以看到的那个swiper-item对应的下标，从0开始
  16.     duration: duration, //swipper-item元素切换动画过渡时间
  17.     currItemNo: 1,//当前显示的swiper-item在所有数据的存放列表（list）中的序号，例如总数量list里共10000条数据，currItemNo=150是指当前显示的是第150条数据
  18.   },
  19.  
  20.   /**
  21.    * 生命周期函数--监听页面加载
  22.    */
  23.   onLoad(options) {
  24.     //这里去请求所有数据，如果接口是分页的就多请求几次拿到所有数据，不存在性能问题
  25.     // uni.request({
  26.     // ...请求逻辑
  27.     // () => { list = res.data.list }
  28.     // })
  29.     //这里模拟请求到了所有数据，例如10000条，然后放到list数组里
  30.     for (let i = 0; i < 10000; i++) {
  31.       list.push({
  32.         bgImg: bgImg,
  33.         title: "[第" + (i + 1) + "个元素]我是一个无限制数量高性能的swiper",
  34.         desc: "A. [第" + (i + 1) +
  35.           "个元素]实现原理：\n\nB. swiper里永远最多只放3个元素，\n\nC. 在swiper切换时根据原来的下标计算新的需要显示的item对应下标，\n\nD. 然后组装好新的最多3个item数据渲染到页面"
  36.       });
  37.     }
  38.     //请求到所有数据后放到list变量里后，初始化swiper
  39.     initSwiper(this, list, () => {
  40.       //这里是初始化完后的回调，你可以写自己的逻辑了，例如拿到当前swiper-item
  41.       console.log(this.data.swiperList[this.data.current]);
  42.     });
  43.   },
  44.   /**
  45.    * swiper切换事件，这里监听的是切换完成动画事件
  46.    */
  47.   itemChange(e) {
  48.     changeSwiperItem(this, Number(e.detail.current), list, duration, () => {
  49.       //切换完成
  50.       //这里可以写自己的逻辑啦，例如去判断当前item是否收藏...
  51.       console.log("切换完成，当前显示的是===", this.data.swiperList[this.data.current].title)
  52.     });
  53.   },
  54.   /**
  55.    * 跳到第n个item数据，n为序号从1开始
  56.    */
  57.   leapTo(e) {
  58.     leapToItem(this, Number(e.currentTarget.dataset.num), list, duration, () => {
  59.       //这里是跳完之后，此时页面已经显示第n个item了，
  60.       //你可以在这里写自己的逻辑了，例如判断当前item是否收藏，是否错题...
  61.       console.log("已经跳转到第" + Number(e.currentTarget.dataset.num) + "个item啦");
  62.     });
  63.   }
  64.  
  65. })

index.wxss代码：

  1. .t-content {
  2.   background-color: #f7f7f7;
  3.   min-height: 100vh;
  4. }
  5.  
  6. .t-h-100p {
  7.   height: 100%;
  8. }
  9.  
  10. .t-hover{
  11.   opacity: 0.7;
  12. }
  13.  
  14. .t-w-100p {
  15.   width: 100%;
  16. }
  17.  
  18. .t-wh-100p {
  19.   width: 100%;
  20.   height: 100%;
  21. }
  22.  
  23. .t-swiper {
  24.   width: 100%;
  25.   box-sizing: border-box;
  26.   height: 500rpx;
  27. }
  28.  
  29. .t-item-con {
  30.   background-size: 100% 100%;
  31.   background-repeat: no-repeat;
  32.   display: flex;
  33.   flex-direction: column;
  34.   justify-content: flex-start;
  35.   align-items: flex-start;
  36.   padding: 30rpx;
  37.   box-sizing: border-box;
  38. }
  39.  
  40. .t-item-title {
  41.   font-size: 36rpx;
  42.   color: #ffffff;
  43.   font-weight: bold;
  44.   text-align: justify;
  45. }
  46.  
  47. .t-item-desc {
  48.   font-size: 28rpx;
  49.   color: #ffffff;
  50.   margin-top: 30rpx;
  51.   text-align: justify;
  52. }
  53.  
  54. .t-leap-desc {
  55.   font-size: 28rpx;
  56.   width: 690rpx;
  57.   margin: 60rpx auto 0rpx;
  58.   color: black;
  59. }
  60.  
  61. .t-leap {
  62.   width: 663rpx;
  63.   height: 100rpx;
  64.   margin: 0 auto;
  65.   box-sizing: border-box;
  66.   padding: 15rpx;
  67.   display: flex;
  68.   flex-direction: row;
  69.   justify-content: flex-start;
  70.   align-items: center;
  71.   flex-wrap: wrap;
  72. }
  73.  
  74. .t-leap view {
  75.   font-size: 24rpx;
  76.   color: #fff;
  77.   padding: 15rpx;
  78.   background: #42b983;
  79.   border-radius: 10rpx;
  80.   width: 57rpx;
  81.   height: 30rpx;
  82.   text-align: center;
  83.   line-height: 30rpx;
  84.   margin: 10rpx;
  85. }

 源码下载方式：dcloud插件市场搜索“微信小程序swiper无限数量不卡顿轮播图”。

或直接打开插件市场链接下载：https ://ext.dcloud.net.cn/plugin?id=12389

注：源码zip文件中包含uniapp版和微信开发者工具版对应的工具类和示例代码。

最后，如果本文对您有帮助了，请帮忙点下赞哦，以便为更多的人提供参考。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/293315
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号