关于在uni-app中使用swiper（APP实测可用）

先上示例图：

 

 这里先说一个问题，swiper 无限滚动会出问题，这里我也没能解决。

swiper官网：

Getting Started With Swiper

swiper中文网：

Swiper演示 > 实际应用演示（手机） - Swiper中文网

上图轮播效果使用的是蚂蚁财富案例（原本用effects 做 cube  跟coverflow效果  最后又被否了）

关于uni-app引入swiper 跟echarts引入并没有什么区别，都是在renderJs中进行操作

JS文件放置位置看下图，关于JS文件下载上面两个链接均可

 

当我们项目中引入swiperJS后还需要引入css文件（也可是less，sass），我这里引入的是css 文件，因为项目只有这一个地方使用swiper,所以把样式引入到了模块内，这里的css文件也是需要我们进行下载并拉去到项目中（当然，如果用CDN也可以）

css文件放置位置

下载地址同JS文件 

贴个中文网下载链接，直接下载对应版本zip解压出来就能看到这俩关键文件了

下载Swiper - Swiper中文网

讲完文件位置我们下一步要使用的时候没什么太多的注意点，上代码讲解

HTML：

<view class="sys-info">
   <!-- sysList.length 判断用于下拉刷新时 解决位置错位问题-->
    <view class="swiper-container" v-if="sysList.length > 0">
        <!--  向 swiper的renderJs 传递sysList 数组， 并对其进行改变监听 :change:sysList -->
		<view class="swiper-wrapper" :sysList="sysList" :change:sysList="setSwiperInit">
			<view v-for="(item,pIndex) in sysList" class="swiper-slide">
				<view class="swiper-slide-item-box">
					<view class="swiper-sys-level" :style="{'background-image': 'url(' + item.levelStyle.imgSrc +')'}">
                    <!--  省略每个卡片中 代码结构........... -->

					</view>
				</view>
			</view>
		</view>
	</view> 
</view>

JS:

<script module="swiper" lang="renderjs">
	let swiperEvent // 实体类
	let that // that 作用为 在swiper - on 对象中调用uni-app 的 $ownerInstance.callMethod，
	let slides // swiper 对象中 slides 
	let timer = null // 防抖
	let selectList // 展示数据数组
	export default {
		mounted() {
            // 数据更新无需直接调用重构方法，会出问题
			if (typeof window.Swiper === 'function') {
				// this.initSwiper()
			} else {
                // 没有实例 创建实例
				if (!swiperEvent) {
					const script = document.createElement('script')
					// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
					script.src = 'static/swiper-bundle.min.js' // 展示核心文件路径，不要乱动
					script.onload = this.initSwiper.bind(this)
					document.head.appendChild(script)
					that = this
				}

				// callMethod = this.$ownerInstance.callMethod

				 
			}
		},
		methods: {
            // 重置 swiper
			initSwiper() { 
                防抖
				if (timer !== null) {
					clearTimeout(timer)
					timer = null
				}
				swiperEvent = new Swiper('.swiper-container', {
					watchSlidesProgress : true,  //查看slide的progress
					resistanceRatio : 0, //禁止边缘移动
                    // event 事件
					on: {
						init: function(swiper){
							slides = swiper.slides;
							let offsetAfter = swiper.width*0.95 //每个slide的位移值
							for (let i = 0; i < slides.length; i++) {
								let slide = slides.eq(i)
								let progress = slides[i].progress
								slide.css('zIndex', 100 - i); //设置slide的z-index层级
								if(progress <= 0){  //右边slide位移
								
									slide.transform('translate3d('+(progress)*offsetAfter+ 'px, 0, 0) scale('+(1 - Math.abs(progress)/20)+')');
									slide.css('opacity',(progress+3));    //最右边slide透明
								}
							}
						},
							
						resize: function(swiper){
							swiper.update()
						},	
							
						setTranslate: function(swiper){
							
							slides = swiper.slides
							let offsetAfter = swiper.width*0.95 //每个slide的位移值
							// let offsetAfter = swiper.width*1.2 //每个slide的位移值
							for(let i=0; i< slides.length; i++){
								let slide = slides.eq(i)
								let progress = slides[i].progress
								if(progress <= 0){  //右边slide位移
									slide.transform('translate3d('+(progress)*offsetAfter+ 'px, 0, 0) scale('+(1 - Math.abs(progress)/20)+')');
									slide.css('opacity',(progress+3));    //最右边slide透明
								}
								
								if(progress > 0){
									slide.transform('rotate('+ (-progress)*5+'deg)');   //左边slide旋转
									slide.css('opacity',1 - progress);    //左边slide透明
								}
							}	
						},
						setTransition: function(swiper, transition) {
								for (let i = 0; i < swiper.slides.length; i++) {
									let slide = swiper.slides.eq(i)
									slide.transition(transition);
								}
						},
						click: function(swiper, event) {
							that.$ownerInstance.callMethod('toSysOverview', {
								activeIndex: swiper.activeIndex,
								selectList: selectList
							})
						}
					},
				});
			},
            // sysList 更新触发当前函数
			setSwiperInit(newValue, oldValue, ownerVm, vm) {
				if (!timer) {
					if (newValue.length > 0) {
						if (typeof window.Swiper === 'function') {
							timer = setTimeout(function() {
								selectList = newValue
								that.initSwiper()
							}, 500);
						}
					}
				}
				
			},
		},
	}
</script>

做到上面步骤时，效果展示就如原图相差无几了，还有一些CSS的差别，关于 on事件对象，建议去英文官网查看对应事件，这里就不过多赘述了

CSS：

	
<style scoped>
@import url('@/common/swiper-bundle.min.css');
.swiper-container {
	width: 100%;
	overflow: hidden !important;
}
.swiper .swiper-slide {
	height: 100%;
	font-size: 32px;
	font-weight: 500;
	color: #ffffff;
	/* 文字垂直居中 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide-item-box {
	position: relative;
	width: 90%;
	margin: 0 0 0 30rpx;
	background-color: #FFF;
	border-radius: 42rpx;
	padding-bottom: 20rpx;
	font-size: 64rpx;
	font-weight: 500;
	color: #ffffff;
	/* 文字垂直居中 */
	overflow: hidden;
	/* box-shadow: 0 0 30rpx 0 rgba(0,117,246,0.3); */
}	        
.sys-info {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	border-radius: 32rpx;
	margin: 20rpx 0;
}
.swiper-sys-level {
	width: 100%;
	height: 430rpx;
	background-size: 100% 100%;
}

.swiper-sys-level.level0 {
	color: #0075F6;
	background: url('~@/static/images/overview/normal.png') no-repeat;
	background-size: 100% 100%;
}
</style>

讲到这里也差不多了，在我的理解里，其实swiper的使用跟echarts 的使用并没有什么不同，都是使用renderJs来进行渲染。

代码写得不优雅还请见谅，欢迎指正。谢谢