前言
研究navigationStyle:costom，使用自定义的导航。老规矩，先上设计稿：
要实现左侧的自定义导航，该导航有一个圆角的边框，圆角的啊~
开始
移动端经典的1px问题+圆角边框。早期，在.less文件中定义了.border-1px()用于解决移动端1px问题，后期为了兼容圆角边框，又添加了几个变量。
// 添加一个设置圆角的.border-1px(@color: #ddd, @pos: bottom, @radius: 0rpx) when (@pos = all){// 父元素position: relative;&::after{display: block;content: '';position: absolute;top: 0;left: 0;border: 1px solid @color;box-sizing: border-box;width: 200%;height: 200%;border-radius: @radius*2;transform: scale(0.5);transform-origin: left top;}}其实是用伪元素+缩放+定位实现了圆角的效果。样式是可以实现的，但是为小图标添加绑定的点击事件，一直没有被触发。
实践
遇到问题，解决问题。
首先是排查事件绑定是否有效，其次定义测试元素，为测试元素绑定事件，查看事件是否生效。最后，发现，在导航内容外部，定义元素，绑定事件，是OK的~
问题还是出在导航元素上，排查、排查，在CSS中发现了.border-1px()。。。原来是生成的伪元素，覆盖了导航中的元素，导致点击事件没法触发。
如何解决呢，既要有框又要圆角？
直接使用border: ;实现会有1px的问题，视觉效果差，最终的解决方案是box-shadow: 0 0 1rpx 0 #ccc。既有边框效果，点击事件也能正常被触发。
总结
一行CSS代码竟然影响了JS事件的触发，排查起来还真的耐人寻味。发现问题，分析问题，解决问题，加油↖(^ω^)↗
嘘寒问暖 不如打笔巨款~
