uniapp 可拖拽视图 movable-area

最新推荐文章于 2024-08-12 19:31:21 发布

我想去看望远方

最新推荐文章于 2024-08-12 19:31:21 发布

阅读量217

点赞数

文章标签： uni-app css html

本文链接：https://blog.csdn.net/weixin_51772991/article/details/130282153

版权

代码cv即可用

<movable-area class="suspension_submit">
			<movable-view direction="all" :x="movable_x" :y="movable_y" @change="onChange">
				<view class="suspension_text" @click="addregionClick()">
					<view class="row"></view>
					<view class="col"></view>
                </view>
			</movable-view>
		</movable-area>

css

.suspension_submit{
		width: 100%;
		height: calc(100% - 100rpx);
		position: fixed;
		top: 100rpx;
		left: 0;
	}
	
	movable-view{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.suspension_text{
		width: 100rpx;
		height: 100rpx;
		background: #00BBD3;
		// box-shadow: 0rpx 4rpx 12rpx 2rpx #00BBD3;
		border-radius: 50%;
		position: relative;
		.row{
			width: 60rpx;
			height: 8rpx;
			background-color: #fff;
			border-radius: 4rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			
		}
		.col{
			width: 8rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 4rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
	}

data

return {
				
				movable_x: 0,
				movable_y: 0,
				movable_old: {
				    x: 0,
				    y: 0
				}
				
			};

onLoad 中初始化起始位置

onLoad() {
			let that = this
		
			uni.getSystemInfo({
				success(data) {
					console.log('系统信息',data);
					that.movable_x = data.windowWidth - 100
					that.movable_y = data.windowHeight - 100
				}
			})
			
		},

methods

            //滑动圆
			onChange: function(e) {
			    this.movable_old.x = e.detail.x
			    this.movable_old.y = e.detail.y
			},
            //点击事件
            addregionClick(){
				console.log('1111')
			},