小程序拖拽效果实现

1. 基础ui组件使用css 帧动画的基础ui

2.创建 wxml 代码如下

ps（此组件可获取用户formid 以便于向用户推送信息）

3.创建wxss ui部分省略 以上可见基础css部分

核心代码

.feed{

position:  fixed;

z-index:  10;

}

button::after{

border:none;

}

4.创建 js文件用于设置组件长宽

（1）主要参数

feed_style:{

x:"",

y:"",

}//这个参数是定位使用的x ， y值

仅在js里面传递的参数：

screen：{

        width："",

          height:""

} // 用于保存屏幕页面信息

preX：上次的x值

preY：上次的y值

（2）.核心方法

1.通过系统接入getinfo获取当前界面可用宽高

wx.getSystemInfo({

success: function (res) {

console.log(res);

console.log("platform",res.platform);

console.log(res.model);

// 可使用窗口宽度、高度

console.log('height=' + res.windowHeight);

console.log('width=' + res.windowWidth);

// Math.ceil()

if(res.platform == "android"){

res.windowHeight = res.screenHeight;

}

// feed_style: {

// x: res.windowWidth + "px",

// y: res.windowHeight + "px"

// },

self.setData({

screen:{

width: res.windowWidth ,

height: res.windowHeight ,

pixelRatio: res.pixelRatio,

ratio: res.windowWidth * res.pixelRatio/750

}

})

// 计算主体部分高度,单位为px

// that.setData({

// second_height: res.windowHeight

// })

}

})

2.通过 touchmove 拿到切换值，将切换值赋值给外部接收参数

touchMoveChange(e){

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({

feed_style: {

x: tmpx - 50 + "px",

y: tmpy - 50 + "px",

}

})

}

}

}

注意事项：

484EB19B6E1F4852AC33D9C608D62943.png

设置前一位数值，拿到值之后转为整数，防止浮点运算影响效率

直接获取设置 定位值为left:top 降低计算难度