uniapp movable-area组件使用

最新推荐文章于 2025-04-01 16:59:33 发布

百事可乐☆

最新推荐文章于 2025-04-01 16:59:33 发布

阅读量411

点赞数 1

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/m0_61672533/article/details/138500165

版权

看过很多文章，基本都是把官方文档搬过来并没有实际用法

<movable-area class="movable-area">
		<movable-view class="movable-view" direction="vertical" :y="nextMovableY" @change="onChange" out-of-bounds="true" @touchend="touchEnd" animation="true">
            //  滑动的内容
        <movable-view>
<movable-area>


// css

.movable-area {
		position: fixed;
		top: 0%;
		left: 0;
		width: 100%;
		height: 100vh;
		pointer-events: none;

		.movable-view {
			width: 100%;
			pointer-events: all;
			position: relative;
		}
	}

去获取屏幕高度和滑动的距离

onLoad(){
		try {
            // 这个封装的获取屏幕高度方法
			this.screenHeight = getApp().globalData.systemInfo.screenHeight
			this.swiperHeight = this.screenHeight / 4
			this.mapHeight = this.screenHeight - this.screenHeight / 3
            // 滑块最初位置
			this.nextMovableY = this.mapHeight - 50
		} catch (e) {}
}

// 组件的 onChange 事件
onChange(e) {
	this.movableY = e.detail.y
},
touchEnd(e) {
        // 这里就是计算滑动的距离
		this.nextMovableY = this.movableY
		setTimeout(() => {
			if(this.movableY > this.screenHeight / 2 - 100) {
				this.nextMovableY = this.mapHeight - 50
				
			} else if(this.nextMovableY > this.swiperHeight && this.nextMovableY < this.mapHeight) {
				this.nextMovableY = this.swiperHeight - 50
			
				} 
			}, 100)
},

可直接粘贴使用，修改一下滑块的距离即可