美文网首页小程序
小程序拖拽效果组件封装(二)完结

小程序拖拽效果组件封装(二)完结

作者: AstarX | 来源:发表于2018-06-06 10:22 被阅读0次

    1.wxml

    <view class="drag" bindtouchmove="touchMoveChange" style="left:{{drag_style.x}};top:{{drag_style.y}};">
        <view>
            <slot name="defalut"></slot>
        </view>
    </view>
    

    2.wxss

      /*定位实现  */
    
    .drag {
        position: fixed;
        z-index: 10;
    }
    
    button::after {
        border: none;
    }
    

    3.json

     {
       "component": true
     }  
    

    4.js

    Component({
        options: {
            multipleSlots: true // 在组件定义时的选项中启用多slot支持
        },
        properties: {
            w: {
                type: Number,
                value: 0,
            },
            h: {
                type: Number,
                value: 0,
            },
            type: String,
            dragx: String,
            dragy: String
        },
        attached() {
            var self = this;
            var dragx, dragy = "0"
            if (!!self.data.dragx) {
                dragx = self.data.dragx;
            }
    
            if (!!self.data.dragy) {
                dragy = self.data.dragy;
            }
            self.setData({
                drag_style: {
                    x: dragx,
                    y: dragy
                }
            })
            console.log(self.data.drag_style)
        },
        ready() {
            var self = this;
            wx.getSystemInfo({
                success: function(res) {
                    // 可使用窗口宽度、高度
                    // 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
                        }
                    })
                }
            })
        },
        methods: {
            // 内部方法建议以下划线开头
            touchMoveChange(e) {
                var _e$currentTarget = e.currentTarget,
                    currentTarget = _e$currentTarget === undefined ? {} : _e$currentTarget;
                var _currentTarget$datase = currentTarget.dataset,
                    dataset = _currentTarget$datase === undefined ? {} : _currentTarget$datase;
    
                var tmpx = parseInt(e.touches[0].clientX);
                var tmpy = parseInt(e.touches[0].clientY);
                if (tmpx <= 0 || tmpy <= 0 || tmpx >= this.data.screen.width || tmpy >= this.data.screen.height) {
    
                } 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({
                            drag_style: {
                                x: tmpx - this.data.w + "px",
                                y: tmpy - this.data.h + "px",
                            }
                        })
                    }
                }
                // this.triggerEvent('touchMove', {});
            },
            formSubmit() {
                this.triggerEvent('formAddEmit', {});
            }
        },
        data: {
            //内部属性 
            drag_style: {
                x: 0,
                y: 0
            },
            preX: "",
            preY: "",
            screen: {
                width: "",
                height: ""
            }
        }
    })
    

    5.使用

    (1).json

    {
       "usingComponents": {
           "dragItem": "../../zanui/drag-box/index"
       }
    }
    

    (2).wxml

    <dragItem wx:if="{{addOrEditState == 3}}" w="50" h="50" dragx="80%" dragy="80%">
            <view slot="defalut">
              12345
            </view>
       </dragItem>
    

    (3).js

    无方法,不需要引用

    相关文章

      网友评论

        本文标题:小程序拖拽效果组件封装(二)完结

        本文链接:https://www.haomeiwen.com/subject/vrzvsftx.html