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

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

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

废话不多，看代码

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) {
    console.log(e.detail)
  }, 
  call: function () {
    wx.makePhoneCall({
      phoneNumber: 12343345
    })
  },
  onLoad: function (options) {
   //获取屏幕高度
    var h = wx.getSystemInfoSync().windowHeight;
  //使用黄金分割比来确定悬浮框的距顶高度，也可以在data里自己设置值都是可以的
    var nh = h * 0.681;
    this.setData({y:nh});
  }
})

wxss代码

page {
  background-color: #f1f1f1;
  height: auto;
}

.min {
  height: 100%;
}
movable-view {
  position: fixed;/*加了之后，屏幕下方内容移动，悬浮窗不动*/
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  /* background: #1AAD19; */
  background: url(http://pic30.nipic.com/20130619/9885883_210838271000_2.jpg) no-repeat;
  color: #fff;
  border-radius: 100px;
  opacity: 0.5;
}
movable-area {
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
  overflow: hidden;
}