uniapp js控制自动横向滚动

HTML:

<template>
	<view class="swiper">
		<view class="swiper-item" :style="{
				left:leftMove+'px'
				}">
			<image class="img" v-for="item,index in list" :key="index" :src="item" mode=""></image>
		</view>
	</view>
</template>

CSS:

	.swiper {
		overflow: hidden;
		width: 100%;
		height: 300rpx;
		position: relative;

		.swiper-item {
			display: inline-block;
			white-space: nowrap;
			height: 100%;
			position: absolute;
			top: 0;

			.img {
				width: 600rpx;
				height: 300rpx;
				flex-shrink: 0;

			}
		}
	}

JS:

mounted() {
	//获取swiper总宽度
	let query = uni.createSelectorQuery().in(this);
	query.select('.swiper').boundingClientRect(data => {
	    this.boxWidth = data.width
	}).exec();
    //获取item宽度
	query.selectAll('.img').boundingClientRect(data => {
			this.itemWidth = data[0].width
	}).exec();
    //获取swiper盒子宽度
	query.select('.swiper-item').boundingClientRect(data => {
		this.allWidth = data.width
		this.scrollSwiper()
	}).exec();
},

data() {
	return {
		    allWidth: 0,//swiper盒子宽度
			leftMove: 0,//左移距离
			boxWidth: 0,//大盒子宽度
            itemWidth:0,//item宽度
			timer: null,//定时器
			list: [],//图片列表
			}
},    
methods: {
	scrollSwiper() {
		let query = uni.createSelectorQuery().in(this);
		let num = 0
		let speed = 0.1
		//计算停止的位置
		let stopWitdh = (this.allWidth - this.boxWidth) - (this.itemWidth * 2)
		let midNum = stopWitdh / 2
			//运动速度
              this.timer = setInterval(() => {
				num++
				if (num % 10 == 0) {
					if (Math.abs(this.leftMove) <= midNum) {
							speed += 0.2
						} else {
							speed <= 0.2 ? speed = 0.8 : speed -= 0.2
						}
					}
				this.leftMove = this.leftMove - speed
				if (Math.abs(this.leftMove) >= stopWitdh) clearInterval(this.timer)
				}, 0)

			},
		}

### 如何在 UniApp 中实现横向自动滚动的轮播图组件 为了创建一个能够在 UniApp 应用程序中工作的横向自动滚动轮播图,可以利用 `scroll-view` 组件并结合定时器来模拟自动滑动的效果[^1]。 #### 使用 scroll-view 和定时器构建自动滚动功能 首先,在页面布局文件 (如 `.vue`) 的 `<template>` 部分定义 `scroll-view`: ```html <template> <view class="carousel-container"> <!-- 设置横向滚动 --> <scroll-view class="scroll-view_H" :scroll-x="true" :scroll-left="scrollLeft" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> <block v-for="(item, index) in items" :key="index"> <view class="scroll-item">{{ item }}</view> </block> </scroll-view> </view> </template> ``` 接着,在 JavaScript 或 TypeScript 脚本部分初始化数据和方法: ```javascript <script lang="ts"> import { ref } from 'vue'; export default { setup() { const items = ['Item 1', 'Item 2', 'Item 3']; // 替换成实际的数据源 let timerId; const scrollLeft = ref(0); function startAutoScroll() { clearInterval(timerId); // 清除之前的计时器 timerId = setInterval(() => { scrollLeft.value += 1; // 向右移动 if(scrollLeft.value >= window.innerWidth * (items.length - 1)) { scrollLeft.value = 0; // 当到达最后一项时重置位置 } }, 50); // 控制速度 } function handleTouchStart(e){ clearInterval(timerId); // 用户触摸屏幕暂停自动播放 } function handleTouchEnd(){ setTimeout(startAutoScroll, 1000); // 结束触摸后延迟恢复自动播放 } onMounted(() => { nextTick().then(() => { startAutoScroll(); }); }); return { items, scrollLeft, handleTouchStart, handleTouchEnd }; }, }; </script> ``` 上述代码实现了基本的自动滚动逻辑,并处理了用户交互情况下的行为调整。通过监听用户的触碰事件 (`@touchstart`, `@touchend`) 来控制何时停止或重新启动自动滚动过程。 对于样式方面,则可以根据需求自定义 CSS 类名来进行美化操作。这里提供了一个简单的例子用于说明目的而非完整的视觉设计解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值