小程序实现显示和隐藏控件" style="margin: 20px 0px; padding: 0px; font-size: 21px; line-height: 1.5; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">微信小程序实现显示和隐藏控件

.wxml:

 <view class=" {{showOrHidden?'show':'hidden'}}"></view>

.wxss:

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

.js:

 data: {     showOrHidden:true,     //判断显示与否的，true表示显示，反之隐藏  },

简洁的方式，利用wx:if的方式

.wxml:

<view wx:if='{{showOrHidden}}'></view>

.js:

 data: {     showOrHidden:true,     //判断显示与否的，true表示显示，反之隐藏   },

点击按钮隐藏view并显示另个view

<view class="{{showView?'show':'hidden'}}" >  <button class='show-button' bindtap='showButton'>go</button> </view>

data: {     showView: true, }, showButton:function(){     var that = this;     that.setData({       showView: (!that.data.showView)     })  }

头像

<open-data type="userAvatarUrl" class='img'></open-data>     

.img {   width: 200rpx;   height: 200rpx;   margin: 20rpx;   border-radius: 50%;   display: flex;   overflow:hidden; }

input输入框和form表单传值和取值方式

实现方式 data-index="{{index}}" e.currentTarget.dataset.index

form表单取值 <form bindsubmit="formSubmit">与<button formType="submit">  formSubmit: function(e) {   var detail = e.detail.value.detail; }

bindblur事件

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="请输入内容" value="{{ceshi}}" />