小程序的拖拽、缩放和旋转手势 滚动置顶

<view class='touch-container'>

<view class='msg'>{{msg}}</view>

<image class='img' src='{{src}}' style="width:{{width}}rpx;height:{{height}}rpx;left:{{left}}rpx;top:{{top}}rpx;transform:translate(-50%,50%) scale({{ scale }}) rotate({{ rotate }}deg);" bindload='bindload' catchtouchstart='touchstart' catchtouchmove='touchmove' catchtouchend='touchend'></image>

</view>

 

 

<scroll-view style="height:100vh" class="scroll-view" scroll-y="true" bindscroll="scroll">

 

<view class="{{scroll_height<'10'?'barrage':'barraging'}}">

<view class="swipwer">吸顶效果</view>

</view>

</scroll-view>

 

 

page {

width:100%;

height: 100%;

background: #fff;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.msg {

width: 100%;

height: 60rpx;

line-height: 60rpx;

text-align: center;

font-size: 30rpx;

color: #666666;

}

.touch-container{

width:100%;

height: 100%;

padding-top: 0.1px;

}

 

.img{

position: absolute;

width: 690rpx;

height: 300rpx;

transform-origin: center center;

}

 

/*样式 */

.barrage{

width:100%;

height:50rpx;

margin-top:20rpx;

position: relative;

background: red;

}

.barraging{

width:100%;

height:50rpx;

position: fixed;

left:0;

top:0;

z-index:100;

margin-top:20rpx;

background: green;

}

.barrage .swipwer{

margin-left:24rpx;

height:50rpx;

line-height:50rpx;

background: rgba(0, 0, 0, 0.6);

font-size:26rpx;

text-align: center;

color:#fff;

width:60%;

border-radius:30rpx;

position:absolute;

left:-500rpx;

background: blue;

}

.barraging .swipwer{

margin-left:24rpx;

height:50rpx;

line-height:50rpx;

background: rgba(0, 0, 0, 0.6);

font-size:26rpx;

text-align: center;

color:#fff;

width:60%;

border-radius:30rpx;

position:absolute;

left:-500rpx;

background: #000;

}

 

var canOnePointMove = false

var onePoint = {

x:0,

y:0

}

var twoPoint = {

x1:0,

y1:0,

x2:0,

y2:0

}

data: {

   scroll_height: '',

src:"http://img01.taopic.com/150508/318763-15050PU9398.jpg",

width:0,

heigth:0,

left:375,

top:600,

scale:1,

rotate:0,

msg:'',

},

// 关闭上拉加载

onReachBottom: function() {

return

},

bindload: function(e) {

var that = this

var width = e.detail.width

var height = e.detail.height

if (width > 750) {

height = 750 * height / width

width = 750

}

if (height > 1200) {

width = 1200 * width / height

height = 1200

}

that.setData({

width:width,

height:height

})

},

touchstart:function(e) {

var that = this

if(e.touches.length < 2){

canOnePointMove = true

onePoint.x = e.touches[0].pageX * 2

onePoint.y = e.touches[0].pageY * 2

}else {

twoPoint.x1 = e.touches[0].pageX * 2

twoPoint.y1 = e.touches[0].pageY * 2

twoPoint.x2 = e.touches[1].pageX * 2

twoPoint.y2 = e.touches[1].pageY * 2

}

},

touchmove: function(e) {

var that = this

if (e.touches.length < 2 && canOnePointMove) {

var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x

var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y

that.setData({

msg: '单点移动',

left:that.data.left + onePointDiffX,

top:that.data.top + onePointDiffY

})

onePoint.x = e.touches[0].pageX * 2

onePoint.y = e.touches[0].pageY * 2

}else if (e.touches.length > 1) {

var preTwoPoint = JSON.parse(JSON.stringify(twoPoint))

twoPoint.x1 = e.touches[0].pageX * 2

twoPoint.y1 = e.touches[0].pageY * 2

twoPoint.x2 = e.touches[1].pageX * 2

twoPoint.y2 = e.touches[1].pageY * 2

// 计算角度，旋转(优先)

var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2) / (preTwoPoint.x1 - preTwoPoint.x2)) * 180 / Math.PI

var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2) / (twoPoint.x1 - twoPoint.x2)) * 180 / Math.PI

if (Math.abs(perAngle - curAngle) > 1) {

that.setData({

msg: '旋转',

rotate: that.data.rotate + (curAngle - perAngle)

})

} else {

// 计算距离，缩放

var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2))

var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2))

that.setData({

msg: '缩放',

scale: that.data.scale + (curDistance - preDistance) * 0.005

})

}

}

 

},

touchend: function (e) {

var that = this

canOnePointMove = false

},

//滚动监听

scroll: function (e) {

var that = this;

// console.log(e.detail.scrollTop)

that.setData({

scroll_height: e.detail.scrollTop

})

},

 

 

阅读更多