在页面使用了 from+button 实现一个拖拽按钮,,控制台报错,如下:
按照警示的大概意思,在这个页面不能使用formSubmit方法操作submit,那我去掉bindsubmit事件试试。嗯,去掉之后发现没有该报错了。
页面wxml代码:
<view class="feed" bindtouchmove="touchMoveChange" bindtouchend="touchEndChange" disable-scroll="{{disableScroll}}" style="left:{{feed_style.x}};top:{{feed_style.y}};">
<form bindsubmit="formSubmit" report-submit="true">//bindsubmit去掉后没有报错
<button catchtap="addQuestionClick" class="heart {{addAnimate?'active':''}}" id="like1" rel="like" style="background-position: {{cssAnimate}} center;" formType="submit"><image class="add" src="{{srcUrl}}questAdd.png"></image></button>
</form>//catchtap实现点击跳转页面,可阻止事件冒泡
</view>
wxss样式:
.feed{
position: fixed;
z-index: 1000;
}
button.heart::after{
border:none;
}
.heart{
width:94rpx;
height:94rpx;
border:1rpx solid #f1f1f1;
border-radius: 50%;
background: #ffffff;
padding: 0;
text-align: center;
line-height: 94rpx;
}
.heart.active{
transition: all .2s;
}
.heart image.add{
width:46rpx;
height:46rpx;
display: block;
margin:0 auto;
margin-top: 24rpx;
}
js部分:
--- data中定义变量:
// 添加问答按钮
//这个参数是定位使用的 x , y 值 , 仅在js里面传递的参数:
feed_style: {
x: "86%",
y: "80%",
},
// 用于保存屏幕页面信息
screen: {
width: "",
height: ""
},
preX: '',//上次的x值
preY: '',//上次的y值
//拖拽按钮动画
addAnimate: false,
disableScroll:false,
--- onload中窗口宽高获取:
var self = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
console.log("platform", res.platform);
console.log(res.model);
// 可使用窗口宽度、高度
console.log('height=' + res.windowHeight);
console.log('width=' + res.windowWidth);
// Math.ceil()
if (res.platform == "android") {
res.windowHeight = res.screenHeight;
}
self.setData({
screen: {
width: res.windowWidth,
height: res.windowHeight,
pixelRatio: res.pixelRatio,
ratio: res.windowWidth * res.pixelRatio / 750
}
})
}
});
--- 移动和结束时的事件:
// addbtn-移动
touchMoveChange(e) {
var tmpx = parseInt(e.touches[0].clientX);
var tmpy = parseInt(e.touches[0].clientY);
if (tmpx <= 50 || tmpy <= 50 || tmpx >= this.data.screen.width || tmpy >= this.data.screen.height - 50) {
} else {
if (tmpx != this.data.preX || tmpy != this.data.preY) {
console.log(e.touches[0].clientX, "-X-", e.touches[0].pageX)
console.log(e.touches[0].clientY, "-Y-", e.touches[0].pageY)
this.data.preX = tmpx
this.data.preY = tmpy
this.setData({
feed_style: {
x: tmpx - 50 + "px",
y: tmpy - 50 + "px"
},
disableScroll:true,
})
}
}
},
// addbtn-结束 鼠标拿开之后,让按钮默认显示在最右侧,x为初始值,y为此时值
touchEndChange: function (e) {
this.setData({
feed_style: {
x: "86%",
y: this.data.preY - 50 + "px"
},
addAnimate: true
})
},
扫描二维码关注公众号,回复:
9952530 查看本文章
(若有更好的方法,欢迎留言讨论:))