- 当前 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
麻烦按说明给个代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题
注:代码片段:https://developers.weixin.qq.com/s/xq0S8SmG7r3Q使用微信工具直接开发的没有出现这个问题,我是通过mpvue开发编译后出现上述问题
先确认下是不是mpvue的问题？
https://developers.weixin.qq.com/s/oNZ8nUmP7i39
已经复现问题,确实小程序的问题, 原因是因为在movable-area 的class属性中动态添加了新的类名(案例中是active类) 会导致movable-view复原
感谢反馈，我们会在后续版本中进行修复
目前的解决方案是:
1-首相将movable-view的animation设置为false;防止第2步出现滑动
2-然后置disabled时,change监听,将x属性绑定的数据赋值为移动后的位置.
嗯。。这个组件有点怪。。。移动之后，松手停下来，你要把x,y设上去。。注意不能在 movableChange 里马上设，要延迟一丢丢
恩 movableChange 里面设置会乱跳,我单独设置的x ,我试一下将y也设置一下.我用movable-view 做了一个滑块验证..不知前辈有什么好的建议吗?多谢
跟Y倒是无关~ 能做个代码片段吗？要具体看一下才知道怎么处理比较方便。。
你看下这个链接。。倒不是不行，只是你以后还会来社区，做代码片段有个好处。。我改了，把我改的片段还给你，你那边也可以验证
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
https://developers.weixin.qq.com/s/xq0S8SmG7r3Q做好了但是没有问题,我用的mpvue 写的这个组件,可能跟mpvue 有关系...