收藏
回答

touchmove元素时,背景活动怎么解决

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug touchmove 客户端 6.5.3 2.4.1

- 当前 Bug 的表现(可附上截图)



- 预期表现


我这边使用的是touchmove实时渲染悬浮窗位置,但是按住往下滑动的时候会导致页面刷新,而 我这个页面又是需要的下拉刷新的,现在情况就是按住滑动的时候背景也会滑动,请问怎么解决


- 复现路径


- 提供一个最简复现 Demo

<view class="cs_button" catchtouchmove='btn_move' catchtouchend='btn_end' style='top:{{clientY}};left:{{clientX}}'>
 
    <view style='width:100rpx; height:100rpx;background-color:red'></view>
 
</view>


.cs_button {
 
    border: 0px;
 
    height: 100rpx;
 
    position: fixed;
 
    background-color: transparent;
 
    z-index: 9999;
 
}


Page({
 
data: {
 
windowWidth: 0,
 
clientY: '80%',
 
clientX: '85%'
 
},
 
onLoad: function () {
 
var _this = this
 
wx.getSystemInfo({
 
success(res) {
 
_this.setData({
 
windowWidth: res.windowWidth
 
})
 
}
 
})
 
},
 
btn_move: function (e) {
 
var yaxes = parseInt((e.changedTouches[0].clientY - 20)),
 
xaxes = parseInt((e.changedTouches[0].clientX - 20))
 
this.setData({
 
clientY: yaxes + 'px',
 
clientX: xaxes + 'px'
 
})
 
},
 
btn_end: function (e) {
 
var width = parseInt((this.data.windowWidth) / 2),
 
yaxes = parseInt((e.changedTouches[0].clientY - 20)),
 
xaxes = parseInt((e.changedTouches[0].clientX - 20))
 
if (xaxes + 20 > width) {
 
var xaxes = '85%'
 
} else {
 
var xaxes = '5%'
 
}
 
this.setData({
 
clientY: yaxes + 'px',
 
clientX: xaxes
 
})
 
},
 
})


最后一次编辑于  2018-11-29
回答关注问题邀请回答
收藏

2 个回答

  • 微盟
    微盟
    2018-11-29

    应该在你的悬浮窗顶层去加catch:touchmove


    2018-11-29
    有用
    回复 1
    • Jimor
      Jimor
      2018-11-29


      之前加了,没用

      2018-11-29
      回复
  • 卢霄霄
    卢霄霄
    2018-11-29

    bind => catch

    2018-11-29
    有用
    回复 14
    • Jimor
      Jimor
      2018-11-29

      用的确实是catch

      <view class="cs_button" catchtouchmove='btn_move' catchtouchend='btn_end' style='top:{{clientY}};left:{{clientX}}'>

      <image class="cs_image" src="{{base64Imgs.suspension}}"></image>

      </view>


      2018-11-29
      回复
    • 卢霄霄
      卢霄霄
      2018-11-29回复Jimor

      这。。就很尴尬了啊~ 能做个代码片段吗?

      2018-11-29
      回复
    • Jimor
      Jimor
      2018-11-29回复卢霄霄

      <view class="cs_button" catchtouchmove='btn_move' catchtouchend='btn_end' style='top:{{clientY}};left:{{clientX}}'>

          <view style='width:100rpx; height:100rpx;background-color:red'></view>

      </view>


      .cs_button {

      border: 0px;

      height: 100rpx;

      position: fixed;

      background-color: transparent;

      z-index: 9999;

      }


      Page({

      data: {

      windowWidth: 0,

      clientY: '80%',

      clientX: '85%'

      },

      onLoad: function () {

      var _this = this

      wx.getSystemInfo({

      success(res) {

      _this.setData({

      windowWidth: res.windowWidth

      })

      }

      })

      },

      btn_move: function (e) {

      var yaxes = parseInt((e.changedTouches[0].clientY - 20)),

      xaxes = parseInt((e.changedTouches[0].clientX - 20))

      this.setData({

      clientY: yaxes + 'px',

      clientX: xaxes + 'px'

      })

      },

      btn_end: function (e) {

      var width = parseInt((this.data.windowWidth) / 2),

      yaxes = parseInt((e.changedTouches[0].clientY - 20)),

      xaxes = parseInt((e.changedTouches[0].clientX - 20))

      if (xaxes + 20 > width) {

      var xaxes = '85%'

      } else {

      var xaxes = '5%'

      }

      this.setData({

      clientY: yaxes + 'px',

      clientX: xaxes

      })

      },

      })


      2018-11-29
      回复
    • Jimor
      Jimor
      2018-11-29回复卢霄霄

      发不出文件,代码复制过来,json文件里还有句 "enablePullDownRefresh": true


      2018-11-29
      回复
    • 卢霄霄
      卢霄霄
      2018-11-29回复Jimor

      好的

      2018-11-29
      回复
    查看更多(9)
登录 后发表内容