//1. 影片js部分，
//點贊方法
TouchDiscuss: function(e) {
var that = this
// this.data.isShow = !this.data.isShow
// 影片
var dz_id = e.currentTarget.dataset.id
var indexs = e.currentTarget.dataset.indexs
var detailY = e.detail.y
var offsetNum = e.target.offsetTop
//第一部分講解
if (Number(detailY) <= (offsetNum + 21) || Number(detailY) >= (offsetNum - 1)) {
detailY = offsetNum + 9
this.setData({
detailY: detailY,
event: e,
dz_id: dz_id,
indexs: indexs
})
}
//var animations = this.data.animation
//設定點擊另一個人的點贊后吧這個人的點贊視窗關閉
if (that.data.isShow == 1) {
that.setData({
popTop: e.target.offsetTop - (detailY - e.target.offsetTop) / 2,
popWidth: 0,
isShow: 0,
})
setTimeout(function() {
that.animation.width(0).opacity(1).step()
that.setData({
animation: that.animation.export(),
})
}, 100)
setTimeout(function() {
that.setData({
dianzan1: "",
pinglun1: ""
})
}, 110)
} else if (that.data.isShow == 0) {
this.openit()
}
},
openit: function() {
var that = this
var event = this.data.event
var detailY = this.data.detailY
var dianzaiID = event.currentTarget.dataset.dianzan
var nowdianzaiID = this.data.openId
setTimeout(function() {
that.animation.height(33).opacity(1)
that.animation.width(170).opacity(1).step()
that.setData({
animation: that.animation.export(),
})
}, 100)
that.setData({
popTop: event.target.offsetTop - (detailY - event.target.offsetTop) / 2,
popWidth: 0,
isShow: 1,
})
setTimeout(function() {
if (dianzaiID.indexOf(nowdianzaiID) >= 0) {
that.setData({
dianzan1: "取消",
})
} else {
that.setData({
dianzan1: "點贊",
})
}
that.setData({
pinglun1: "評論"
})
}, 300)
},
//影片wxml部分（影片wxml）
<view animation="{{animation}}" class='pop-up-box' style='top:{{popTop}}px;width: {{popWidth}}px;'>
<text class="dianzan" bindtap="bindDianZan">{{dianzan1}}</text>
<text class="pinglun" bindtap="bindpinglun">{{pinglun1}}</text>
</view>
//影片wxml部分（影片wxss）
.pop-up-box{
position: absolute;
height: 60rpx;
border-radius: 10rpx;
right: 91rpx;
background: rgba(0, 0, 0, 0.7)
}
//影片wxml部分（點贊按鈕）
<image data-isShow='{{isShow}}' bindtap='TouchDiscuss' src='https://img.uj5u.com/2020/09/13/64912131546341.jpg' data-id="{{resultData[k].id}}" data-dianzan="{{resultData[k].dianzanID}}" mode="widthFix" data-indexs="{{k}}"></image>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/25561.html
標籤：微信開發