微信小程序悬浮可拖动客服组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序悬浮可拖动客服组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1348字，纯文字阅读大概需要2分钟。

内容图文

写了一个微信小程序里面的悬浮可拖动的客服组件，下次可以直接使用了。

movable-area 和movable-view 用法参考微信官方手册：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

kefu.js

Component({
properties: {},
data: {
x: 250,//定位X轴位置
y: 250//定位Y轴位置
},
pageLifetimes: {
show: function() {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
x: res.windowWidth - 50,
y: res.windowHeight /2+50
})
},
fail: function(res) {},
complete: function(res) {},
})

},
hide: function() {},
resize: function() {},
},
methods: {},

});

kefu.wxss

movable-area{
width: 100%;
height:100%;
/*设置透明不影响后面的操作*/
pointer-events: none;
position:fixed;
text-align: center;
right:0px;
top:0px;
background: none;
}
.kefu, .kefuIcon {
width: 45px;
height: 45px;
border: none;
padding: 0;
background: none;
}
.kefu image {
max-width: 100%;
max-height: 100%;
}

.kefu button::after {
border: none;
}

kefu.wxml

<movable-area>
<movable-view x='{{x}}' y='{{y}}' direction="all" style="pointer-events: auto;">
<button open-type="contact" bindcontact="handleContact" class="kefu">
<image src='../../images/icon/kefu.png' class="kefuIcon"></image>
</button>
</movable-view>
</movable-area>

需要引入客服的页面的json配置：

{
    "component": true,
    "usingComponents": {
        "v-kefu": "/components/kefu/kefu"
    }
}

wxml页面调用：

<v-kefu></v-kefu>

内容总结

以上是互联网集市为您收集整理的微信小程序悬浮可拖动客服组件全部内容，希望文章能够帮你解决微信小程序悬浮可拖动客服组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---