<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
})
},