微信小程序--点击隐藏某一行数据

最新推荐文章于 2021-11-16 15:54:26 发布

原创最新推荐文章于 2021-11-16 15:54:26 发布 · 4.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #隐藏 #点击

收录于

微信小程序专栏收录该内容

0 篇文章

订阅专栏

本文介绍微信小程序中实现提示信息框的显示与关闭功能。通过在WXML文件中设置带有关闭按钮的提示框，并利用JS文件控制提示框的显示状态，提升用户体验。

微信小程序开发中，会有提示信息框，为了有好的用户体验，一般会加一个关闭的按钮，点击后，关闭提示信息框。

member.wxml

<view class='info-tit' hidden='{{hiddenName}}' bindtap='textHide'>
    <view class="weui-cell__hd">
      <image src="../../../image/tit.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
    </view>
    <text class='tit_text'>温馨提示：完善个人信息可享受更多优惠及惊喜哦！</text>
    <text class='close_tit'>×</text>
  </view>

member.js

page({
    data:{
        hiddenName:false
    },
    textHide:function(e){
        this.setData({
            hiddenName:!this.data.hiddenName
        })
    }
})

从上面两段代码可以很明显看出逻辑：member.wxml中点击类名为 close_tit 的text标签会在member.js中触发一个事件，它会改变hiddenName的值，而在member.wxml中会根据hiddenName的值去控制类名为 info-tit 的view标签的隐藏。

感谢阅读，希望能帮助到大家。