微信小程序学习之路（三）悬浮客服按钮

最新推荐文章于 2025-03-13 16:29:20 发布

置顶

宸寰

最新推荐文章于 2025-03-13 16:29:20 发布

阅读量1.6k

点赞数

分类专栏：微信小程序文章标签：悬浮窗客服拨打电话

本文链接：https://blog.csdn.net/weixin_39070579/article/details/101368100

版权

本文介绍了如何在微信小程序中创建悬浮客服按钮，详细解析了参考官方文档并进行修改的过程，包括设置`movable-area`和`movable-view`的使用，以及调整page高度为auto，同时提供了js和wxss部分的关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我写的悬浮按钮，是参考官网文档，并稍加修改得到的

官网地址：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

废话不多，看代码

<movable-area>
 <movable-view x="{
  {x}}" y="{
  {y}}" direction="all" style="" bindtap="call"></movable-view> 
 </movable-area>

movable-area 是movable-view 可移动的区域，如果需要添加内容，比如展示信息之类的，可以放在movable-view标签的前面。

且，page的height 设置为auto。

js部分代码

//获取应用实例
var app = getApp();
Page({
  data: {
    x: 300,
    y: '',
    scale: 2,  
  },
  tap(e) {
    this.setData({
      x: 30,
      y: 30
    })
  },
  tap2() {
    this.setData({
      scale: 3
    })
  },
  onChange(e) {
    console.log(e.detail)
  },
  onScale(e