爱收集资源网

轻松搞定微信小程序客服菜单,让用户留连忘返

网络整理 2023-09-29 01:02

写陌陌小程序的时侯须要用到一个客服菜单,在设计上面这个菜单须要呈现为一个块状,布局的时侯我使用View来实现这个款式,本来想的是通过对view定义风波来打开客服,并且在实现功能的时侯忽然发觉客服只能使用两种形式实现,

#8:1:f:7:4:7:2:a:2:4:7:3:5:d:9:1:0:3:e:7:9:e:4:3:c:e:d:b:5:c:d:0#

说实话,官方提供的这两种形式局限都挺大,非常是第二种,要实现我的雷人需求太难了。本来抱有的一丝期望在查阅了大量的资料后也舍弃了,目前为止还没有办法通过调用风波来打开客服,于是只能回到前面这两种方法中来

网上查到的通常是是通过把放一排,以达到点击按键任何位置都能打开客服的目的,

#3:5:c:6:b:4:6:6:8:2:f:6:d:4:b:7:0:b:e:b:f:f:4:9:6:f:a:6:d:b:8:6#

或则通过把客服按键绝对定位到自己的按键上方,之后设置绝对透明,以达到听到的是自己写的按键并且实际点击的是客服按键的目的(原文链接:)

然而作为一个轻度逼迫症病人,认为这两种方式都变得过分冗长了,不够完美,于是尝试通过定义button来实现我想要的疗效

一、效果图

首先,我想要实现的疗效如右图所示

#4:c:7:c:e:f:7:c:4:8:c:1:b:a:8:1:c:3:a:8:6:3:b:e:f:4:2:c:2:e:e:5#

客服按键对应wxml代码为

#f:1:3:8:8:a:c:3:9:0:5:e:4:8:b:4:8:9:5:2:4:3:b:6:7:e:c:5:7:1:5:5#

.js文件相关代码

#a:b:0:b:6:6:2:2:5:9:6:8:1:9:d:b:e:4:b:6:7:2:b:7:a:3:a:8:6:c:4:d#

.wxss文件相关代码

#d:7:c:a:b:1:0:5:6:4:d:0:7:b:8:4:c:e:3:d:f:7:6:c:7:6:e:8:6:2:a:5#

二、加入button

我实现这个款式的思路是,用标记包住菜单内容以实现点击菜单任何位置都能打开客服,再对按键定义款式,使其完全融入菜单当中,相关代码如下

#b:f:6:b:0:f:4:a:4:6:8:d:6:f:1:4:d:2:6:9:6:d:2:a:f:4:4:e:2:f:0:6#

.js文件

#a:b:0:b:6:6:2:2:5:9:6:8:1:9:d:b:e:4:b:6:7:2:b:7:a:3:a:8:6:c:4:d#

.wxss文件

#b:b:3:d:6:3:7:1:e:2:5:1:a:c:e:e:8:b:9:b:d:c:e:d:7:b:b:1:1:1:4:5#

对比wxml可以发觉,对代码的改动极小,只是使用button保住了原先的内容,但是定义了新的款式,其他的没有做变化

三、注意事项定义button的款式时,border是在其款式的::after里,假若直接定义款式都会发觉border设置无效因为编辑菜单的时侯我是使用wx:for来实现一个个的选项的,因为我的客服是单独的一行,所以把静态置于了的上面不会有任何问题,而且假如在.js文件上面多加几个对象即多加几行菜单的话都会发觉点击新加入的菜单就会打开客服,这是因为wx:for循环创建菜单的时侯会把循环内的静态代码原封不动的保留出来,所以假如有同学也是用这些方法的话,还须要把换成变量,否则程序会出问题的哟~

微信小程序 对话框
上一篇:2016年计算机考试报名及条件 下一篇:没有了