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

小程序实现显示和隐藏控件" 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>

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

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

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

if='{{showOrHidden}}'>点击按钮隐藏view并显示另个view

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

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

"formSubmit">与<button formType="submit">

formSubmit: function(e) {
  var detail = e.detail.value.detail;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!