uni-app 微信小程序实现全屏客服按钮可随意拖动

uni-app 微信小程序实现全屏客服按钮可随意拖动

微信小程序新增一个需求需要添加在线客服功能,其实微信小程序开发的已经非常完美了,很多功能拿来即用。今天在这里分享一个在uni-app 微信小程序中实现一个全屏客服按钮可随意拖动。

效果图如下:

实现步骤下面来一起查看:

第一步: 选择一个合适的客服icon

iconfont: https://www.iconfont.cn/ (这里面又很多可以选择的图标,使用方法:uni-app 中iconfont的用法 )

第二步: 实现可拖动按钮 :movable-area

uni-app 给给我们提供了可拖动区域组件,movable-area  【具体文档请查看官方文档

下面来看一下实现的代码吧。

  1. 新建组件 components/kefu/kefu.vue
  2. 下载客服icon, static/kefu.png
  3. 在页面中引入组件即可

页面:

<template>
	<!-- 可拖动 -->
	<movable-area class="movableArea">
		<movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
			<image src="../../static/kefu01.png" mode="widthFix"></image>
			<button open-type='contact' session-from='' class="contact">联系我们</button>
		</movable-view>
	</movable-area>
</template>

css:

.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素
		z-index: 999;
	
		.movableView {
			pointer-events: auto; //可以点击
			width: 100rpx;
			height: 100rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
			// 客服
			.contact {
				width: 50px;
				height: 50px;
				overflow: hidden;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 100%;
				opacity: 0;
			}
			
		}
	}

引入:

import kefu from '../../../components/kefu/kefu.vue'

//引入组件
components: {
    kefu
},

//使用组件

<kefu></kefu>

客服使用文档: 微信客服消息文档

以上内容即可实现uni-app 微信小程序全屏客服按钮可随意拖动功能了。

—— 微信小程序学习资源下载—–

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程,小月博客持续更新…

 

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏