微信小程序-点击按钮内容显示和隐藏，并且文字改变

最新推荐文章于 2024-09-20 13:21:53 发布

ZhangXD_BLOG

最新推荐文章于 2024-09-20 13:21:53 发布

阅读量2.1w

点赞数 6

本文链接：https://blog.csdn.net/u012054869/article/details/88399889

版权

wxml:

<!--按钮-->
<view class="more" bindtap="showedit">{{editText}}</view>
<!--内容-->
<view class="delete {{editTrue?'isRuleShow':'isRuleHide'}}">
     <image src='delete.png' mode="widthFix"></image>
</view>

wxss：

.isRuleShow {
  opacity: 1;
}

.isRuleHide {
  opacity: 0;
}

js：

Page({
  data: {
    editTrue: false,
    showModalStatus: false,
    editText: '编辑'
  },
  onLoad: function(options) {
    
  },

  // 编辑
  showedit: function() {
    var that = this;
    if (that.data.editTrue == true) {
      that.setData({
        editTrue: false,
        editText: '编辑'
      })

    } else {
      that.setData({
        editTrue: true,
        editText: '完成',
      })
    }
  },
 
})