movable-view置disabled时,类名动态增加时位置复原
发布于 5 年前 作者 litan 6617 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）

    movable-view的初始默认x属性为20,disabled为false,然后将movable-view移动到其他位置后,再由undisabled置disabled时,

movable-view的class属性加了一个active类(这个是根本原因),导致movable-view复原

  • 预期表现

   movable-view置disabled,父级movable-area的class动态添加类名时位置还原

  • 复现路径

    问题一句总结:movable-view被置disabled时,且父级movable-area的class动态添加类名时,movable-view会被复原.

  • 提供一个最简复现 Demo

//wtml

<movable-area class="movable-area {{movable.disabled?'active':''}}">

  {{movable.text}}

  <movable-view class="movable-view" bindchange="movableChange" y="0" x="{{movable.position}}" disabled="{{movable.disabled}}" direction="horizontal">

  </movable-view>

</movable-area>


//js

const app = getApp()


Page({

  data: {

    devieceWith: wx.getSystemInfoSync().windowWidth,

    movable: {

      disabled: false,

      position: '',

      text: '拖动滑块验证'

    }

  },

    movableChange(e) {

      console.log(e.detail.x)

      console.log(this.data.devieceWith)

      let _x = e.detail.x;

      let _dis = 'movable.disabled'

      let _pos = 'movable.position'

      let _text = 'movable.text'

      if (_x / 0.8 === this.data.devieceWith) {

        this.setData({

          [_dis]: true,

          [_pos]: e.detail.x,

          [_text]: '验证成功'

        })

    

      }

    }

})

//js


注:代码片段:https://developers.weixin.qq.com/s/oNZ8nUmP7i39

3 回复

麻烦按说明给个代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

目前的解决方案是:

1-首相将movable-view的animation设置为false;防止第2步出现滑动

2-然后置disabled时,change监听,将x属性绑定的数据赋值为移动后的位置.

嗯。。这个组件有点怪。。。移动之后，松手停下来，你要把x,y设上去。。注意不能在 movableChange 里马上设，要延迟一丢丢

回到顶部