場景

采用uniapp的movable-view組件實現滑動驗證組件。

• 流程
  • 滑塊未滑到最右端時，回彈到原點
  • 滑塊滑到最右端時，則顯示滑動結束，不可再滑動

問題

頻繁設置uniapp的movable-view組件的x屬性，在H5端正常，但在微信小程序端則失效。

index.vue

<template>
	<view style="height: 100vh;width: 800rpx;display: flex;justify-content: center;align-items: center;">
		<wo-slider>
		</wo-slider>
	</view>
</template>

<script>
	import woSlider from './woSlider.vue'
	export default {
		components: {
			woSlider
		},
	}
</script>

<style>
</style>

woSlider.vue

<template>
	<view>
		<movable-area id="skidway" class="skidway">右滑全開
			<movable-view :damping="100" @touchend="onEnd" id="slider" :x="x" class='slider' direction="horizontal" @change="onChange" :disabled="isFinished">
				<view style="border-radius: 50%;height: 100%; width: 100%;overflow: auto;">
					<view v-if="isFinished" style="height: 100%">
						<view style="background: #1BA035; height: 100%; display: flex;justify-content: center;align-items: center;">
							<view class='movable-icon' style="background-image: url(/static/select-bold.svg)"></view>
						</view>
					</view>
					<view v-else style="height: 100%">
						<view style="background: #E5673B;height: 100%; display: flex;justify-content: center;align-items: center;">
							<view class='movable-icon' style="background-image: url(/static/arrow-right-bold.svg)"></view>
						</view>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				oldX: 0,
				skidwayWidth: 0,  // 滑道長度
				sliderWidth: 0,  // 滑塊長度
				isFinished: false,
				moveWidth: 0
			}
		},
		mounted() {
			const elemt = uni.createSelectorQuery().in(this)
			elemt.select('#skidway').boundingClientRect((data) => {
				this.skidwayWidth = data.width;  // 獲取滑道長度
			}).exec()
			elemt.select('#slider').boundingClientRect((data) => {
				this.sliderWidth = data.width;  // 獲取滑塊長度
			}).exec()
		},
		methods: {
			onChange: function(e) {
				this.x = e.detail.x
				if(Math.round(this.x) >= Math.round(this.skidwayWidth - this.sliderWidth)) {
					this.isFinished = true  // 滑到最右端則完成
				}
			},
			onEnd: function(e) {
				if(Math.round(this.x) < Math.round(this.skidwayWidth - this.sliderWidth)) {
					setTimeout(()=>{
						this.x = 0  // 觸摸松開的時候，未滑到最右端時則回到原位
					}, 100)
				}
			}
		}
	}
</script>

<style>
	.skidway{
		background-color: aliceblue;
	  width:200px;
	  height: 80rpx;
	  border-radius: 60rpx;
	  display:flex;
	  justify-content:center;
	  align-items:center;
		position: relative;
	}
	.slider{
	  width: 80rpx;
	  height: 80rpx;
	}
	.movable-icon{
	  width: 30rpx;
	  height: 30rpx;
	  background-size: 100% 100%;
	}
	.end-status {
		border-radius: 60rpx 0rpx 0rpx 60rpx;
		background-color: red;
		height: 100%;
		overflow: auto;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
</style>

• H5端
  
• 微信小程序端
  

原因

官方給出的解釋：

由于app和小程序的架構是邏輯層與視圖層分離，使用js監(jiān)聽拖動時會引發(fā)邏輯層和視圖層的頻繁通訊，影響性能。為了方便高性能的實現拖動，平臺特封裝了movable-area組件。

意思大概就是: 對頻繁變化的組件屬性值做了一些優(yōu)化，將"多次變化"合為"少次變化"來執(zhí)行。

官方給出的解決方案：


官方推薦第一種方法去解決這個問題，所以我們就來試試第一種。
第一種方法的思路就是：先用一個變量記錄頻繁變化的屬性值，在最后的結束動作再用這個記錄值來修改組件的屬性值。

結果：成功解決在小程序端失效的問題文章來源地址http://www.zghlxwxcb.cn/news/detail-664985.html

<template>
	<view>
		<movable-area id="skidway" class="skidway">右滑全開
			<movable-view :damping="100" @touchend="onEnd" id="slider" :x="x" class='slider' direction="horizontal" @change="onChange" :disabled="isFinished">
				<view style="border-radius: 50%;height: 100%; width: 100%;overflow: auto;">
					<view v-if="isFinished" style="height: 100%">
						<view style="background: #1BA035; height: 100%; display: flex;justify-content: center;align-items: center;">
							<view class='movable-icon' style="background-image: url(/static/select-bold.svg)"></view>
						</view>
					</view>
					<view v-else style="height: 100%">
						<view style="background: #E5673B;height: 100%; display: flex;justify-content: center;align-items: center;">
							<view class='movable-icon' style="background-image: url(/static/arrow-right-bold.svg)"></view>
						</view>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				oldX: 0,
				skidwayWidth: 0,  // 滑道長度
				sliderWidth: 0,  // 滑塊長度
				isFinished: false,
				moveWidth: 0
			}
		},
		mounted() {
			const elemt = uni.createSelectorQuery().in(this)
			elemt.select('#skidway').boundingClientRect((data) => {
				this.skidwayWidth = data.width;  // 獲取滑道長度
			}).exec()
			elemt.select('#slider').boundingClientRect((data) => {
				this.sliderWidth = data.width;  // 獲取滑塊長度
			}).exec()
		},
		methods: {
			onChange: function(e) {
				this.oldX = e.detail.x  // 記錄變化值
				if(Math.round(this.oldX) >= Math.round(this.skidwayWidth - this.sliderWidth)) {
					this.isFinished = true  // 滑到最右端則完成
				}
			},
			onEnd: function(e) {
				this.x = this.oldX  // 觸摸松開，設置movable-view的x屬性為記錄的變化值
				if(Math.round(this.oldX) < Math.round(this.skidwayWidth - this.sliderWidth)) {
					setTimeout(()=>{  // 觸摸松開的時候，未滑到最右端時則回到原位
						this.x = 0
						this.oldX = 0
					}, 100)
				}
			}
		}
	}
</script>

<style>
	.skidway{
		background-color: aliceblue;
	  width:200px;
	  height: 80rpx;
	  border-radius: 60rpx;
	  display:flex;
	  justify-content:center;
	  align-items:center;
		position: relative;
	}
	.slider{
	  width: 80rpx;
	  height: 80rpx;
	}
	.movable-icon{
	  width: 30rpx;
	  height: 30rpx;
	  background-size: 100% 100%;
	}
	.end-status {
		border-radius: 60rpx 0rpx 0rpx 60rpx;
		background-color: red;
		height: 100%;
		overflow: auto;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
</style>

到了這里，關于滑動驗證組件---設置movable-view組件的x屬性在微信小程序端失效的問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！