微信小程序点击出现，再次点击隐藏

最新推荐文章于 2024-04-16 15:38:49 发布

tiffany_kim

最新推荐文章于 2024-04-16 15:38:49 发布

阅读量2.3k

点赞数 2

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/tiffany_kim/article/details/114887972

版权

本文总结了微信小程序中常见的点击显示与隐藏功能，以底部导航卡为例，提供了view、wxss和js代码示例，详细解释了如何通过bindtap事件和wx:if条件渲染实现导航栏的显示与隐藏效果。

摘要由CSDN通过智能技术生成

小功能 点击出现，再次点击隐藏

这是开发小程序经常会用到的小功能，所以就做一下总结。
以点击出现底部导航卡为例。

view代码如下

  <view class="click" bindtap="blocknav">
    <image src="../../images/click.png"></image>
  </view>

  <view class="wtx_nav" wx:if="{
    {nav}}">
      <navigator hover-class="none" class="wtx_nav_item active" url="/pages/xiamen/xiamen">
        <image src="../../images/iconxiamen.png" class="iconfont"></image>
        <view style="color:#004098;">厦门</view>
      </navigator>