微信小程序悬浮可拖动客服组件
写了一个微信小程序里面的悬浮可拖动的客服组件,下次可以直接使用了。
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>
微信小程序悬浮可拖动客服组件相关推荐
- 关于微信小程序云开发---实现客服自动回复图片例子
关于微信小程序云开发-实现客服自动回复例子 微信自带的云开发功能使前端工程师可以独立的开发出一款小程序,微信自带的云开发. 首先和开发其他平台的项目一样先看官方文档. 微信小程序开放文档 一. 什么是 ...
- aos动画库反向播放,pdf复制出现乱码,微信小程序底部栏联系客服
少小多才学,平生志气高.别人怀宝剑,我有笔如刀. 记录一些遇到的问题- 本文大概3000字,阅读大概需要9分钟 ** 本文目录 一.pdf复制出现乱码问号问题 二.aos动画库反向播放问题 三.微信 ...
- 微信小程序跳转到客服会话,将内容带到服务窗口并发送给客服(只是曲线救国)
最近有需求是这样的:通过微信小程序里面带的客服会话功能,将用户选择的不适症状发送给客服.拿到需求我首先进行了分析. 发现接入客服不难,只需要将按钮给上,设置open-type="contac ...
- 微信小程序:收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览 微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车 在goods_detail下的index.wxml写页面代码 < ...
- 微信小程序怎么接入多客服系统
最近有很多运营人说,微信公众号越来越难做了,打开率和分享率呈下滑趋势,发文就掉粉,随着小程序的功能不断优化,很多运营人纷纷投入小程序的怀抱.小程序将在今年彻底爆发,更多创业者.流量主会进场厮杀.所以只 ...
- 微信小程序云函数处理客服消息
上传配置 temp-cloud-callback-config.json 已经废弃 后续会推出新的方式 --此路不通了 [20190620更] 需开发者工具版本:现在最新版本是RC v1.02. ...
- 微信公众号、小程序开发——1、客服消息+简易自开发回复平台
一.客服消息"咨询-回复"方式 1.咨询方式 公众号:公众号主页发送各类型消息后,会在公众号后台收到用户消息. 小程序:在小程序网页中添加"客服按钮",进入客服 ...
- 微信小程序中如何发送客服消息给用户
微信小程序是一种快速开发和发布应用程序的平台,可以为用户提供各种服务和功能.而与用户进行沟通和交互是实现这些目标的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中使用客服消息来与用户进行联系 ...
- 微信小程序云开发博客系统源代码,让写博客像发朋友圈一样简单,含使用部署教程
博客就两种:一是随笔,记录自己的成长历程,二是有目的的发文,例如搬运各种网赚文,我想大部分朋友做博客的初衷都是有一块自己的心灵净土,于是催生了wxapp-blog这款小程序. 完整代码下载地址:微信小 ...
最新文章
- EOSIO Dawn 4.0 发布
- 为什么阿里巴巴要禁用Executors创建线程池?
- UILabel的自适应宽高
- javascript span ie 与FF
- Linux下的vim编辑器与gcc编译器及静动态库的制作
- UltraEdit 使用操作
- C/C++——输入输出字符相关,cout.put()和putchar()
- 自动化测试用例设计的原则
- python 正则匹配手机号
- 数字三角形_递归_递推(动态规划)
- java基础学习(7)浅析final,private,public,protected,static等关键以及它们的区别的联系
- android深度探索第二章
- c语言除法的ns流程图,ns流程图(c语言ns流程图怎么画)
- 关于初高中虚拟仿真实验室解决方案
- 未来教育计算机二级题库如何更新,未来教育的计算机二级题库准吗?
- 如何换config.plist、换clover和添加引导的教程
- 儿子作恶,母亲受报应
- 【解决】fatal error: X11/XXXX.h: No such file or directory
- 携程硅谷人才见面会邀请你参加!
- Arduino开发实例-DIY超声波传感器避障机器人
热门文章
- 关于苹果的IDFA(广告识别符)政策
- Android绘图(四)阴影、渐变和位图运算处理
- 这七种情况下,不要创业
- web ----- SQL语句
- plsql因目标主机或对象不存在_原创 | 由勒索软件谈起:重新审视工业信息安全,要从工业主机开始...
- C语言-编写求两个双精度数之和的函数
- EFI系统分区必须挂载到/boot/efi其中之一如下的错误搞了好久终于搞定了!
- 游戏时光psn服务器维护,「VG晚报」哭了,PSN终于能改名了!
- i5 10400f和i7 9700f哪个强
- 命令行启动mysql拒绝访问