不多说，直接上代码。全屏拖动无抖动，中间停留自动靠边，拖动隐藏一半，可自己根据代码改动为自己想要的效果
js代码
import { tpStaticUrl,basictpStaticUrl } from "../../../envConfig";
let app = getApp();
Component({ properties: { },data: {windowWidth: 0, // 手机宽度windowHeight:0, // 手机高度touX: 0, // 拖动后的X坐标touY: 0, // 拖动后的Y坐标x: 250,//定位X轴位置y: 250, //定位Y轴位置icon_xiaodangjia: tpStaticUrl+'/web/wxapp/bxsc/icon_xiaodangjia.png', // },pageLifetimes: { // 初始化show: function() { var that = this;// console.log('222222222')wx.getSystemInfo({ success: function(res) { console.log(res)that.setData({windowWidth: res.windowWidth, // 手机宽度 windowHeight: res.windowHeight, // 手机高度x: res.windowWidth - 50,y: res.windowHeight /2 - 20})},fail: function(res) { },complete: function(res) { },})},hide: function() { },resize: function() { },},methods: { serviceClick(){ // chelink + '/xiaoDj/index.html?wxtoken=' + rInfo.wxtoken + '&openId=' + uidapp.globalData.webviewSrc = basictpStaticUrl + '/web/xiaoDj/index.html?wxtoken=' + app.globalData.userInfo.xtoken + '&openId=' + app.globalData.userInfo.gwOpenId + '&unionId=' + app.globalData.userInfo.unionId;wx.navigateTo({ // reLaunch关闭所有页面跳转 关闭当前页面--跳转 redirectTo navigateTo不关闭页面跳转url: "/pages/page/webView/webView"})},bindchange(e){this.setData({ touX: e.detail.x,touY: e.detail.y})// console.log(e.detail)},bindtouchend(e){let _this = this;// console.log('停止',_this.data.touY,e)// setTimeout(function(){if(_this.data.touX + 50 > _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){ // 移动右边超过了边距_this.setData({ x: _this.data.windowWidth - 25,y: e.changedTouches[0].pageY-20// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}if(_this.data.touX + 50 < _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){ // 没有超过的时候，自动在右边_this.setData({ x: _this.data.windowWidth - 50,y: e.changedTouches[0].pageY-20// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}if(_this.data.touY+50 > _this.data.windowHeight){ // 滑到底部的时候_this.setData({x: _this.data.windowWidth-50, y: _this.data.windowHeight- 100// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}// },1000)} }});
wxml 代码
<movable-area><movable-view x='{{x}}' y='{{y}}' direction="all" style="pointer-events: auto;" bindchange="bindchange" bindtouchend="bindtouchend"><div bindtap="serviceClick" class="kefu"><image src="{{icon_xiaodangjia}}" class="kefuIcon"></image></div></movable-view>
</movable-area>
wxss 代码
movable-area{ width: 100%;height:100%;/*设置透明不影响后面的操作*/pointer-events: none;position:fixed;text-align: center;right:0px;top:0px;background: none;z-index: 9999;}.kefu, .kefuIcon { /* width: 45px;height: 45px; */border: none;padding: 0;background: none;}.kefu image {display: inline-block;width: 96rpx;height: 100rpx;}/* .kefu image { max-width: 100%;max-height: 100%;} */.kefu button::after { border: none;}
