小程序小眼睛显示隐藏样式

最新推荐文章于 2022-07-16 21:46:24 发布

鬼才_飛

最新推荐文章于 2022-07-16 21:46:24 发布

阅读量534

点赞数

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

本文链接：https://blog.csdn.net/m0_46769524/article/details/117022872

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序小眼睛显示隐藏样式

之前：
在这里插入图片描述
点击后：

不说废话上代码
wxml：

 <view bindtap="eyeChange" style="position: absolute;top: 113px;left:14px">
      <text style="font-weight:bold;font-family: monospace;">预缴金额 (元)</text>
      <view style="float:right;margin: 1px 0 0 10px;"><image src="../image/{{jepng}}" style="width:24px;height: 22px;"></image></view>
      <view class="{{showView?'show':'hide'}}" style="font-weight:bold;font-family: auto;">{{spendingNum}}</view>
      <view class="{{showView?'hide':'show'}}" style="font-weight:bold;font-family:cursive;letter-spacing:6px;">{{spendingHideNum}}</view>
  </view>

wxss：

.hide{
  display: none;
}
.show{
  display: block;
}

js：

data: {
    spendingNum:"666.66",//如果有后台改次属性的值就行
    spendingHideNum:"****",
    jepng:"eye1.png"
  },
  //点击view块
  eyeChange: function(){
    this.setData({
      jepng:this.data.showView?"eye2.png":"eye1.png",
      showView: !this.data.showView
    })
  },