uniapp实现支付宝可拖曳的智能客服按钮

原创

已于 2022-11-22 17:20:58 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #uniapp #智能客服 #contact-button

于 2022-05-04 14:55:19 首次发布

这个示例展示了如何在Vue中创建一个可移动的按钮组件。使用`movable-area`和`movable-view`，并结合触摸事件来实现按钮的位置改变和吸边效果。同时，代码还涉及到了组件的初始化位置设置和场景适应性布局。

示例代码如下：

<template>
	<movable-area class="ai-button-container">
		<!-- #ifdef MP-ALIPAY -->
		<movable-view class="ai-box" :class="{'transparent':isShow==false}" :position="position" :x="x" :y="y" direction="all" damping="10" @change="onChange" @touchend="onTouchend">
			<view class="btn">
				<contact-button :tnt-inst-id="tntInstId" :scene="scene" icon=""/>
			</view>
		</movable-view>
		<!-- #endif -->
	</movable-area>
</template>

<script>
	export default {
   
   
		props:{
   
   
		},
		data() {
   
   
			return {
   
   
				tntInstId:'',
				scene:'',
				position:4,
				x: 0