常见的小程序右边悬浮客服代码示例
原创常见的小程序右边悬浮客服代码示例
原创
十仔
发布于 2023-04-21 01:03:18
发布于 2023-04-21 01:03:18
代码可运行
运行总次数：0
代码可运行
<view class="customer-service" catchtap="tapCustomerService">
<image class="icon" src="customer-service.png"></image>
</view>
.customer-service {
position: fixed;
right: 30rpx;
bottom: 30rpx;
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
background-color: #007AFF;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 50rpx;
height: 50rpx;
}将图片文件customer-service.png替换成你自己的客服图标，可以使用小程序开发工具的图片上传功能进行上传。当用户点击客服图标时，将触发tapCustomerService函数。
可以在函数中使用wx.navigateTo或wx.redirectToAPI跳转到对应页面。示例代码如下：
Page({
tapCustomerService: function () {
wx.navigateTo({
url: '/pages/customer-service/customer-service',
})
}
})
在Page对象的tapCustomerService方法中使用wx.navigateToAPI跳转到名为customer-service的页面。请确保在小程序中已经创建了customer-service页面，并在页面的JS文件中实现了对应的逻辑。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
