当前位置: 首页 > Web前端 > CSS

微信小程序隐藏客服按钮,用图片代替&添加可随时关闭的提醒卡片

时间:2023-03-30 16:45:19 CSS

如图所示,这个案例我们需要做的就是右下角的客服按钮和蓝色渐变的提醒卡片,可以随时关闭。微信官方给了客服按钮标签。无法修改此标签的样式。如果我们想要改变我们想要改变的画面,我们应该怎么做呢?羊毛布?就像我照片上的风格一样。我的客服控件放在一个完美的圆形视图的中心,所以这里我先按位置将它定位到中心,并最大化尺寸。然后将透明度设置为0,然后为完美的圆形视图设置图片背景。图片是您要显示的图标提示卡。提示卡是一个视图。view里面有一个×号用来绑定隐藏事件,bindtap="onChangeShowState"用来隐藏这个view的index.wxml×如有任何问题,请点击这里index.wxss.zixun{width:55px;高度:55px;背景:url(http://wxpad.cn/yunpan/cdn/imgsrc/1530949769.png)不重复;位置:固定;底部:35px;右:35px;-半径:50%;框阴影:005px#ddd;文本对齐:居中;字体大小:14px;color:#333;}.zixun.kf{position:relative;顶部:0px;左:0px;边距:15px自动;不透明度:0;}.bright789-text{位置:固定;底部:100px;右:65px;宽度:200px;高度:45px;背景图像:线性渐变(向左,#4481eb0%,#04befe100%);-左上角半径:50px;border-top-right-radius:50px;z-索引:99999999;框阴影:0010px#eee;行高:40px;文本缩进:15px;}.bright789-text.close{字体大小:1.5em;颜色:#fff;}.bright789-text.text{字体大小:13px;颜色:#fff;边距顶部:-38px;margin-left:20px;}.bright789_view_hide{display:none;}index.js//index.js//获取应用实例constapp=getApp()Page({data:{showView:true},onLoad:function(options){//生命周期函数--监控页面加载showView:(options.showView=="true"?true:false)},onChangeShowState:function(){varthat=this;that.setData({showView:(!that.data.showView)})}})OK,制作完成!添加一名作者