微信小程序之悬浮拖动框

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。具体的自己对照