Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序中客服的实现加页面UI

小程序中客服的实现加页面UI

原创
作者头像
用户6493868
发布于 2022-03-07 10:47:52
发布于 2022-03-07 10:47:52
57400
代码可运行
举报
文章被收录于专栏:vue封装H5vue封装H5
运行总次数:0
代码可运行
效果图
2022-03-07_184428.png
2022-03-07_184428.png
实现步骤
UI样式

采用按钮button方式实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button class="ke-fu" open-type="contact" bindcontact="handleContact">
    <image class="kefu-img" src="../../images/kefu.png"></image>
    <view class="kf-kf">客服</view>
  </button>

css样式文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.ke-fu {
  margin-left: 640rpx!important;
  width: 12%!important;
  position: fixed;
  bottom: 0;
  margin-bottom: 80rpx;
  text-align: center;
  z-index: 2;
  border: 1px solid #f4ebde;
  border-radius: 50%;
  height: 90rpx;
  background: #f4ebde;
  box-shadow: 2rpx 5rpx 10rpx 5rpx #DBD7D5;
}

.kefu-img {
  width: 50rpx;
  height: 50rpx;
}

.kf-kf {
  vertical-align: top;
  margin-top: -50rpx;
  font-size: 20rpx;
  color: #00ACED;
}

这里需要注意如果你的按钮画出来不是圆形的多半是没有合理调整样式,需要样式穿透!important

js文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
open-type="contact" 

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序客服分享悬浮按钮代码
以下代码可用于在微信小程序中的客服咨询与用户分享操作。按钮通过设置 plain='true' 来使其显示为简单的图标按钮,按钮的位置和样式通过 CSS 进行了详细的定制,确保在不同屏幕大小和设备上都能良好显示和使用,以下为参考代码。
oscool资源分享
2024/09/26
2910
UNI-APP高颜值登陆注册页面!!附源码!!
酷炫的登陆界面是应用的首要门面。而在我们的开发小程序过程中,由于显示条件的限制我们几乎都是自己一个人既要保证接口的高可用,还要尽力去美化小程序的样式。所以这个时候,寻找到靠谱且贴合需求的样式模板,这就显得尤其重要。
老K博客
2024/09/09
1.5K0
UNI-APP高颜值登陆注册页面!!附源码!!
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。
淼学派对
2022/11/20
1.7K0
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
详解:小程序如何授权登录并获取用户绑定手机号?
微信小程序中有许多地方需要用户注册信息的地方,需要填写手机号等。下面给大家分享微信小程序获取手机号授权用户登录功能,有了这个组件可以快速获取微信绑定手机号码,无须用户填写。
极乐君
2020/08/27
16.8K1
详解:小程序如何授权登录并获取用户绑定手机号?
小程序弹出半角遮罩层
这里是是废话:小程序的一个简单案例,通过wx:if即可触发点击事件弹出遮罩层,只需要在view里面写入自己的其他需求即可
德宏大魔王
2023/08/08
5320
小程序弹出半角遮罩层
【征稿计划第二期】【使用攻略】【红酒识别】快速接入百度智能小程序
接口文档 https://ai.baidu.com/docs#/ImageClassify-API/71e05fb6
小帅丶
2021/12/28
4750
【征稿计划第二期】【使用攻略】【红酒识别】快速接入百度智能小程序
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
大型电商,一个页面会存在非常多的图片,一次性加载图片会很慢,用户体验度不好,而图片懒加载是为了提这些网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。
愚公搬代码
2022/09/28
1.2K0
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
微信小程序--粉丝列表 样式实现
微信小程序粉丝列表效果实现 1.效果图 2.代码实现 index.js 部分 data: { friends: [] }, index.wxml <view class="box
Kindear
2020/03/18
2.6K0
微信小程序--粉丝列表 样式实现
微信小程序swipe切换及自适应高度问题解决
​ 页面代码,其中的变量这些东西需要的自己替换一下即可: <view> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"
黄啊码
2021/07/23
9470
微信小程序swipe切换及自适应高度问题解决
基于腾讯云开发微信小程序(新闻发布及共享平台)下
微信小程序云开发是腾讯云和微信团队联合开发的,集成于微信小程序控制台的原生Serverless 云服务,解决了Serverless架构对端的“最后一公里”问题,通过集成端SDK,配合云开发后台的API网关,为开发者提供了一站式后端云服务。云开发支持多种客户端,帮助开发者统一构建和管理资源,免去了开发中服务器搭建、极大简化了URL配置、鉴权管理等流程,让微信小程序开发者专注于业务逻辑的实现,而无须理解后端逻辑及服务器运维知识,门槛更低,效率更高。只需要一名开发人员就可以完成所有的工作。
淼学派对
2022/11/20
3.4K0
基于腾讯云开发微信小程序(新闻发布及共享平台)下
Springboot健康上报小程序: element后台管理系统(完整代码)
新建userController.java 写入相关接口代码(这个接口不太严谨,第一次做不太清楚又有点赶,后面懒得改了)
德宏大魔王
2023/08/08
2900
Springboot健康上报小程序: element后台管理系统(完整代码)
使用uni-app开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作:
wfaceboss
2019/04/08
5.8K1
使用uni-app开发微信小程序之登录模块
开发一个微信小程序(6):查询天气-添加最近3日天气
编辑pages/weather/weather.wxml,添加最近3日天气相关代码
冰霜
2023/02/24
7060
开发一个微信小程序(6):查询天气-添加最近3日天气
小程序请假效果
var dateTimePicker = require('../../utils/dateTimePicker.js'); Page({ // 页面的初始数据 data: { date: '', winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, //获取当前滑块的index bindchange: function(e) { const that = this; that.
达达前端
2022/04/29
3880
宠物社区小程序_宠物论坛哪个好
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/08
8390
宠物社区小程序_宠物论坛哪个好
小程序实现页面多级来回切换支持滑动和点击操作
通过触发pagechange1方法中的事件对currentIndex来进行赋值,又通过currentIndex的改变使前端wxml对应更改,这个部分对滑动和点击的操作都一样,无非就是使currentIndex对应到各自的位置,通过数字来决定位置
德宏大魔王
2023/08/08
5100
小程序实现页面多级来回切换支持滑动和点击操作
开发一个微信小程序(5):查询天气-添加未来24小时逐小时天气
这个功能比较简单,只需要调一下和风天气的24小时预报拿到数据,然后在小程序中使用 <scroll-view> 标签滚动显示数据即可
冰霜
2023/02/24
9191
开发一个微信小程序(5):查询天气-添加未来24小时逐小时天气
微信小程序即时聊天对话窗口静态源码[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/146737.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/28
1.8K0
【uniapp小程序】打印列表UI模板
这是一个云打印项目,首页查询接口渲染设备,设备是否在线是通过redis进行判断的,当设备在线时可以通过在线的驱动软件打印用户提交的文档,自动处理无需人工干预
德宏大魔王
2023/08/08
4900
【uniapp小程序】打印列表UI模板
微信小程序button组件样式
需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:
韦弦zhy
2018/09/11
13.6K0
微信小程序button组件样式
推荐阅读
相关推荐
微信小程序客服分享悬浮按钮代码
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验