timg.jpg
小程序实现拖拽:movable-area和movable-view必须搭配使用才可以实现
1.movable-area必须设置W和H,默认为10px
2.movable-view小于movable-area时,movable-view的移动范围是在movable-area内
3.direction一共有4个属性:all、vertical、horizontal、none
4.inertia:movable-view是否带有惯性
5.out-of-bounds:超过可移动区域是否可以还移动
6.scale:是否支持双指缩放,默认缩放手势生效区域是在movable-view内
详细属性:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
先看图
image.png
<movable-area class="content-bg">
<movable-view class='content-block' bindtap='add' direction="all">{{msg}}
<image src='' class="imgStyle"></image>
</movable-view>
</movable-area>
-------------------------------------------------
.content-bg {
pointer-events: none;
height: 100%;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #aaa;
}
.content-bg>.content-block {
pointer-events: auto;
height: 50px;
width: 50px;
background:orangered;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
-------------------------------------------------
Page({
/**
* 页面的初始数据
*/
data: {
msg:'start',
flag:false
},
// 触发点击事件时执行的操作
add(){
var flag = [this.data.flag]
console.log(flag)
if(flag == 'false'){
this.setData({
msg:'stop',
flag:true
})
}else{
this.setData({
msg:'start',
flag:false
})
}
},
})
网友评论