小程序报错：Component "pages/..." does not have a method "formSubmit" to handle even "submit"

最新推荐文章于 2025-03-24 16:04:29 发布

橙子_tong

最新推荐文章于 2025-03-24 16:04:29 发布

阅读量2.2w

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_42220533/article/details/101194431

版权

微信小程序专栏收录该内容

25 篇文章

订阅专栏

本文探讨了在页面上实现拖拽按钮时遇到的表单提交冲突问题，详细介绍了wxml、wxss及js代码的实现过程，通过移除bindsubmit事件解决了控制台的报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面使用了 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
    })
  },

（若有更好的方法，欢迎留言讨论：））