点击按钮关闭

教程

微信小程序开发，通过navigator实现点击按钮关闭时阴影问题

退出当前小程序

<navigator open-type="exit" target="miniProgram">
  <tn-button backgroundColor="#56BD48" margin="140rpx 0" width="100%" shadow>
    <text class="tn-color-white" style="width: 300rpx;">完 成</text>
  </tn-button>
</navigator>

<tn-button backgroundColor="#56BD48" margin="140rpx 0" width="100%" shadow>

</tn-button>

</navigator>

如上，能实现微信小程序的点击按钮退出功能，但是点击时会产生一个阴影，如下图所示。解决阴影网上提供的方法很多，其本质来说，都是唯一的，就是解决navigator的hover class问题。最简单的办法是：

<navigator open-type="exit" target="miniProgram" hover-class="none">
  <tn-button backgroundColor="#56BD48" margin="140rpx 0" width="100%" shadow>
    <text class="tn-color-white" style="width: 300rpx;">完 成</text>
  </tn-button>
</navigator>

<tn-button backgroundColor="#56BD48" margin="140rpx 0" width="100%" shadow>

</tn-button>

</navigator>

加上h…

蓝洛水深

2024年3月10日

021940