微信小程式實現顯示和隱藏控制元件

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