1. 基础ui组件使用css 帧动画的基础ui
2.创建 wxml 代码如下
ps（此组件可获取用户formid 以便于向用户推送信息）
<!--点赞小心心 -->
<view class="feed" bindtouchmove="touchMoveChange" style="left:{{feed_style.x}};top:{{feed_style.y}};"catchtap='addAnimateFun'>
<form bindsubmit="formSubmit" report-submit="true">
<button class="heart {{addAnimate}}" id="like1" rel="like" style="background-position: {{cssAnimate}} center;" formType="submit"></button>
</form>
</view>
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 降低计算难度
网友评论