uni-app中使用swiper自动滚动

好久没有开发app了，最近又接到一个新的大屏页面，其中包含了echarts和swiper，在此再次记录一下，开发流程，方便日后查看（真机测试正常）尚未提测。

示意图

如上图所示，当我的手指在滚动列表中移动时，列表会停止滚动，当我手指离开后列表又会开始滚动，实现这种效果并不困难，只需要一个配置项即可

使用版本

使用的版本是swiper6，中文网址是swiper中文网

对应下载地址请点击swiper各个版本下载

代码解和使用介绍

如果需要使用swiper必须要存在对应的js以及css文件

下面讲解.vue文件

<view class="swiper-container">
<!--  向 swiper的renderJs 传递list 数组， 并对其进行改变监听 :change:list-->
	<view class="swiper-wrapper" :list="list" :change:list="setSwiperInit">
		<view v-for="(item,pIndex) in list" class="swiper-slide">
			<view class="swiper-slide-item-box">
                <!-- 这里开始就是自定义每一个滚动元素的内容了 -->
				<view class="swiper-project-alarm">
					  <view class="swiper-project-alarm-day">
						已延期{{item.daytimes}}天
					  </view>
					  <view class="swiper-project-alarm-box">
						<view class="swiper-project-alarm-box-top">
							{{item.toubleNam}}
						</view>
						<view class="swiper-project-alarm-box-bottom">
							计划交付日期：{{item.endDtm}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view> 



<script>
	import chartsFour from './js/chartsFour.js';
	export default {
		name: 'chartsFour',
		mixins: [chartsFour],
		components: {}
	}
</script>
//下面是renderjs使用，
<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/js/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', {
					slidesPerView: 4, // 幻灯片数量
					spaceBetween: 6, // 幻灯片之间的间距
					direction: 'vertical', // 指定Swiper的滑动方向为垂直方向，即垂直滚动
					loop: true, // 启用循环模式
					speed: 1000, // 设置滑动的速度为1000毫秒，即1秒钟滑动完成
					autoplay: { // 配置自动播放功能
						disableOnInteraction: false, // 表示用户交互后不停止自动播放
						delay: 1000 // 表示每个幻灯片之间切换的时间间隔为1秒
					},
					observer: true, // 当Swiper的父元素变化时自动初始化Swiper
					on: {
						resize: function(swiper){
// 定义在Swiper尺寸改变时触发的事件，这里是调用swiper.update()来更新Swiper的尺寸和布局
							swiper.update()
						},	
					},
				});
			},
            // list 更新触发当前函数
			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>
<style scoped>
	@import url("./css/chartsFour.css");
	@import url('@/common/swiper-bundle.min.css'); /* 核心css存放路径 必须引入*/
	.swiper-container {
		width: 100%;
		height: 100%;
		overflow: hidden !important;
	}
	.swiper .swiper-slide {
		width: 650rpx;
		height: 100rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.swiper-slide-item-box {
		position: relative;
		width: 100%;
		height: 100%;
		color: #ffffff;
		overflow: hidden;
	}	        
	.swiper-project-alarm {
		position: relative;
		width: 100%;
		height: 100%;
		/* background-image: url(~@/static/images/bigScreen/charts-four-group.png); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
.charts-four-box-body {
	position: relative;
	width: calc(100% - 46rpx);
	height: calc(100% - 108rpx);
	padding: 23rpx;
}
.swiper-project-alarm-day {
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	width: 140rpx;
	height: 46rpx;
	font-weight: 400;
	font-size: 22rpx;
	color: #040E14;
	line-height: 46rpx;
	letter-spacing: 1px;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.swiper-project-alarm-box {
	width: calc(100% - 166rpx);
	height: calc(100% - 20rpx);
	padding:10rpx 0 10rpx 26rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.swiper-project-alarm-box-top {
	width: calc(100%);
	font-size: 24rpx;
	color: #FC8C44;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.swiper-project-alarm-box-bottom {
	width: calc(100%);
	font-size: 24rpx;
	color: #809AAB;
	text-align: left;
}
.charts-four-box-header-right-num {
	font-family: DIN;
	font-weight: 400;
	font-size: 41rpx;
	color: #FC8C44;
	line-height: 48rpx;
	letter-spacing: 2px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.charts-four-box-header-right-unit {
	font-size: 32rpx;
	line-height: 48rpx;
	letter-spacing: 2px;
	color: #809AAB;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
	 
</style>

大部分代码都放在了.vue文件内，所以js文件中只需要将list数组定义好即可

var app = getApp();

export default {
	data() {
		return {
			list: [
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'2',
					endDtm: '2022-11-19'
				},
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'800',
					endDtm: '2022-11-19'
				},
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'100',
					endDtm: '2022-11-19'
				},
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'100',
					endDtm: '2022-11-19'
				},
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'999',
					endDtm: '2022-11-19'
				},
				{
					toubleNam:'榆林陕煤物资小保当01面150泵站',
					daytimes:'100',
					endDtm: '2022-11-19'
				},
			]
		}
	},
	mounted() {

	},
	onLoad(options) {
		console.log(options, 'options')
	},
	onShow() {
	},
	methods: {

	}
}

tip：一定要记的在 mounted()中创建实例。

在自测过程之中发现一个bug，当loop: true, // 启用循环模式时，数组长度小于四位时，swiper复制的DOM会展示在列表内，导致列表展示数与实际数不符。

解决：判断展示的list长度，动态赋值loop。

1在 setSwiperInit 函数中判断更新数组长度

2.that.initSwiper(newValue.length > 4) // 是否大于展示列表长度

3.initSwiper(loop) // 接受传参

4.loop: loop,   // 动态赋值