movable-view 组件 disable 机制问题
发布于 6 年前 作者 guiyingwu 6641 次浏览 来自 问答

我想实现图片的拖拽排序，效果是：初始时图片不可被拖动，长按图片后图片会变大一些，并且可拖动，松手后又不可拖动（就像发朋友圈）。

为达到该效果，我把 movable-view 的 disabled 属性初始化为 true，在 longpress 事件中，再赋值为 false

然后我发现在第一次 longpress 中设置 disabled 属性，并不能让 movable-view 可拖动，而是必须要先松手，再去尝试拖动，此时 movable-view 才可被拖动。


预期效果希望能够在 disabled 为 true 的 movable-view 组件中，使用 longpress 事件修改 disabled 时能够立即生效。


代码片段


js

Page({
    data: {
        width: 100,
        height: 100,
        disabled: true,
        top: 0,
        left: 0
    },
 
    long: function(e) {
        this.setData({
            width: 110,
            height: 110,
            disabled: false,
            top: -5,
            left: -5
        });
    },
    end: function(e) {
        this.setData({
            width: 100,
            height: 100,
            top: 0,
            left: 0
        });
    },
    onChange: function(e) {
    }
})

wxml

<movable-area style="height: 200px; width: 200px; background: darkgreen;">
    <movable-view
            style="height: {{height}}px; width: {{width}}px; background: white; top: {{top}}px; left: {{left}}px; transition: width .2s linear, height .2s linear, top .2s linear, left .2s linear;"
            x="50"
            y="50"
            direction="all"
            out-of-bounds="true"
            disabled="{{disabled}}"
            catch:longpress="long"
            catch:touchend="end"
            bindchange="onChange"
    ></movable-view>
</movable-area>
2 回复

楼主这个问题解决了吗？我也遇到了同样的问题。。。

我 用了 下 disabled 属性 无论是 true 还是 false 都不能 动

是我的 姿势 不对么

求 正确 的 使用 姿势

disabled=“false”
回到顶部