微信小程序之悬浮拖动框

1.微信小程序悬浮拖动页面Darg

Darg.js

Page({

data:{

top  :  ' ' ,

left :  ' ',

windowWidth:'',

windowHeight:''

}

//拖动不超过规定范围 setTouchMove: function (e) { console.log( "---------------- e.touches[0].clientX----------------8==" + e.touches[ 0].clientX) console.log( "---------------- e.touches[0].clientX----------------8=======" + e.touches[ 0].clientY) if (e.touches[ 0].clientX < 650) && e.touches[ 0].clientY < 1110 && e.touches[ 0].clientX > 0 && e.touches[ 0].clientY > 0) { this.setData({ left: e.touches[ 0].clientX , top: e.touches[ 0].clientY }) } else { this.setData({ left: 650 , top: 1110 }) }

},

})

Darg.json

{

"navigationBarTitleText": "图标拖动",

}

Darg.wxml

</ view > < view class= "view" style= " top:{{top}}px;left:{{left}}px;margin: 10% 0rpx 0rpx 0%;" bindtouchmove= "setTouchMove"> < view > < image style= "height:40px;width:40px;" src= "/images/Ings.png"></ image > </ view > </ view >

Darg.wxss

.view{ position: fixed ; height: 60px; width: 60px; border-radius: 2rem; background: #999999; color: white; text-align: center; line-height: 60px; }

附：position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。具体的自己对照