用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序悬浮客服

Rolan 2020-6-5 00:54

1.html:movable-area class="movableArea" movable-view class="movableView" direction="all" inertia x="{{x}}" y="{{y}}" bindchange="touchChange" bindtouchend="touchEnd" view class="do

1.html:

  1. <movable-area class="movableArea">
  2. <movable-view class="movableView" direction="all" inertia x="{{x}}" y="{{y}}" bindchange="touchChange" bindtouchend="touchEnd">
  3. <view class="dock-service-wrap {{pin?'active':''}} {{isTouch?'round':''}}">
  4. <view class="mi-flex mi-align-items-center">
  5. <mi-icon src="/images/kefu.png" width="90rpx" bindtap="handlePin" />
  6. <navigator wx:if="{{!user.id}}" url="/pages/login/login">
  7. <view class="dock-service-tips">
  8. <text>HI\n</text>
  9. <text>我是您的顾问,有任何问题\n随时都可以联系我。</text>
  10. </view>
  11. </navigator>
  12. <button wx:else class="btn-contact" session-from="sobot|{{user.nickname}}|{{user.avatar_url}}||transfer_action={{transferAction}}" open-type="contact">
  13. <view class="dock-service-tips">
  14. <text>HI,{{user.nickname}}\n</text>
  15. <text>我是您的顾问,有任何问题\n随时都可以联系我。</text>
  16. </view>
  17. </button>
  18. <mi-icon class="dock-service-dock" src="/images/icon_arrow_right@2x.png" width="28rpx" bindtap="handleDock" />
  19. </view>
  20. </view>
  21. </movable-view>
  22. </movable-area>

2.css:

  1. .movableArea {
  2. position: fixed;
  3. top: 0;
  4. width: 100vw;
  5. height: 100vh;
  6. pointer-events: none;
  7. z-index: 100;
  8. }
  9. .movableView {
  10. pointer-events: auto;
  11. width: 120rpx;
  12. height: 120rpx;
  13. }
  14. .dock-service-wrap {
  15. padding: 15rpx;
  16. width: 132rpx;
  17. max-height: 148rpx;
  18. background-color: rgba(0, 0, 0, 0.7);
  19. border-radius: 150rpx 0 0 150rpx;
  20. overflow: hidden;
  21. transition: border-radius 100ms ease-in-out;
  22. }
  23. .dock-service-wrap.active {
  24. width: 480rpx;
  25. }
  26. .dock-service-wrap.round {
  27. width: 120rpx;
  28. border-radius: 150rpx
  29. }
  30. .dock-service-wrap.active .dock-service-tips {
  31. display: block;
  32. }
  33. .dock-service-wrap.active .dock-service-dock {
  34. display: block;
  35. }
  36. .dock-service-tips {
  37. display: none;
  38. margin-left: 16rpx;
  39. color: #fff;
  40. font-size: 24rpx;
  41. line-height: 30rpx;
  42. text-align: left;
  43. }
  44. .dock-service-dock {
  45. margin-left: 16rpx;
  46. display: none;
  47. }

3.js:

  1. import {
  2. getUser
  3. } from "./../../core/user.js";
  4. Component({
  5. options: {
  6. styleIsolation: "apply-shared"
  7. },
  8. /**
  9. * 组件的属性列表
  10. */
  11. properties: {
  12. y: {
  13. type: Number,
  14. value: 0,
  15. },
  16. },
  17. /**
  18. * 组件的初始数据
  19. */
  20. data: {
  21. user: {},
  22. transferAction: "[{'actionType':'to_group','deciId':'b3d80dcbba164dffa8edf2a95feb9bf2','optionId':'4'}]",
  23. initX: wx.getSystemInfoSync().safeArea.width,
  24. x: wx.getSystemInfoSync().safeArea.width,
  25. pin: false,
  26. isTouch: false,
  27. },
  28. lifetimes: {
  29. attached: function () {
  30. this.setData({
  31. user: getUser(),
  32. });
  33. },
  34. ready: function () {
  35. this.createSelectorQuery().select(".dock-service-wrap").fields({
  36. size: true
  37. }, res => {
  38. this.setData({
  39. initX: wx.getSystemInfoSync().safeArea.width - res.width,
  40. x: wx.getSystemInfoSync().safeArea.width - res.width
  41. });
  42. }).exec();
  43. }
  44. },
  45. pageLifetimes: {
  46. show: function () {
  47. this.setData({
  48. user: getUser(),
  49. });
  50. // console.log(this.data.user);
  51. }
  52. },
  53. /**
  54. * 组件的方法列表
  55. */
  56. methods: {
  57. touchChange(event) {
  58. let {
  59. x,
  60. y,
  61. source
  62. } = event.detail;
  63. if (source === "touch") {
  64. this.setData({
  65. isTouch: true,
  66. pin: false
  67. });
  68. } else if (x === this.data.initX) {
  69. this.setData({
  70. pin: false,
  71. isTouch: false
  72. });
  73. }
  74. },
  75. touchEnd(event) {
  76. // 只有拖动的时候才会去改变y坐标
  77. // 其它因素触发该事件不会改变y坐标
  78. if (this.data.isTouch === false) {
  79. return;
  80. }
  81. let y = event.changedTouches[0].clientY;
  82. this.setData({
  83. x: this.data.initX,
  84. y: y,
  85. });
  86. },
  87. handlePin() {
  88. // 如果拖动还未结束,点击无效
  89. if (this.data.isTouch === true) {
  90. return;
  91. }
  92. if (this.data.pin === false) {
  93. this.setData({
  94. pin: true,
  95. });
  96. this.createSelectorQuery().select(".dock-service-wrap").fields({
  97. size: true
  98. }, res => {
  99. this.setData({
  100. x: wx.getSystemInfoSync().safeArea.width - res.width
  101. });
  102. }).exec();
  103. } else {
  104. this.handleDock();
  105. }
  106. },
  107. handleDock() {
  108. this.setData({
  109. x: this.data.initX,
  110. });
  111. }
  112. }
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 吸取天地精华 来自: cnblogs