语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>常用API接入 >>微信小程序 >>微信小程序点击实现隐藏和点击实现显示

微信小程序点击实现隐藏和点击实现显示

2018/9/20 7:33:27 0人评论 5643次 作者:admin

微信小程序点击实现隐藏和点击实现显示…

组件显示的方法:即是定义组件的表现形式

display: none;

wxml文件:


 <view >

  <button  class="hide{{showView?'show':''}}" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>

  //?:即表示了一种选择关系

  <button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>

 </view>

 <view class="hide{{showView?'show':''}}">

 <text class="text">我是被显示被隐藏控件</text>

 </view>


wxss文件


.hide{

 display: none;

}

.show{ 

 display: block;

}


js文件


Page({

  data: {

    showView: true

  },

  onLoad: function (options) {

    // 生命周期函数--监听页面加载

    showView: (options.showView == "true" ? true : false)

  }

  , onChangeShowState: function () {

    var that = this;

    that.setData({

      showView: (!that.data.showView)

    })

  }

})


注意理解其中的选择关系,我这里有两个botton组件,但是显示的时候实际可以看到的只有一个 

因为当点击的时候,另一个组件被隐藏了,也就是display方式改变了,在这个地方也就可以理解 

为有一个循环关系,也就是上一个组件被后面的组件覆盖了 

也就实现了用户的一种交互操作


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【康乃狄克州 】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮