微信小程序之实现一键退出（挂起）小程序以及如何去除 view/navigator 点击后默认阴影效果
·
写在最前
在开发项目过程中，碰到这么一个需求：当用户点击取消或者拒绝时，系统直接关闭小程序，返回微信客户端。
实现的功能与小程序中右上角的圆圈功能类似。
功能实现
其实功能实现起来很简单，只不过我们之前一直没有注意到，navigator 中有一个跳转方式 open-type 属性，里面的属性值有一个是 exit 即 退出小程序。
<navigator open-type="exit" target="miniProgram">
<button class="btn" bindtap="refuse">拒绝</button>
</navigator>
实现效果：当点击 “拒绝” 时，直接退出小程序。
关联问题
当面的主要问题解决了，再看一个相关联的问题吧。
1. 去除view/navigator 点击后默认阴影效果
当我们点击时，底部会出现一个阴影，虽然没有什么其他影响，但是若不去除则影响用户体验，效果很丑。
原因：就是因为 hover:class 定义容器在被触发时自带的默认样式捣的鬼。
解决方案：重置 hover-class 的样式（为避免被覆盖，一般在 wxss底部添加该 class）：
<!-- wxml -->
<navigator open-type="exit" target="miniProgram" hover-class="noshadow">
<button class="btn" bindtap="refuse">拒绝</button>
</navigator>
/* wxss */
.noshadow {
hover-class: none;
}
实现效果：
问题轻松解决！
欢迎有问题的小伙伴留言讨论。。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
1
0- 0
已为社区贡献9条内容
所有评论(0)