微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

微信小程序实现显示和隐藏控件

.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 {
   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}}" />