微信小程序點擊控制元素的顯示與隱藏

微信小程序點擊控制元素的顯示與隱藏

首先我們先來看一下單個點擊效果

我們來看一下wxml中的代碼：

<view class="conten">
  <view class="header">
    <view class="nav_i">
      <text class="nav_tex">更多內容</text>
    </view>
    <view class="nav_righ" bindtap="mmmm">更多></view>
  </view>
  <view class="body">
    <view class="data" bindtap="share">
      <view class="icon">
        <image style="width:19px;height:19px;text-align:conten" wx:if="{{shows}}" src="/src/icon/minus.png"></image>
        <image style="width:19px;height:19px;text-align:conten" wx:else src="/src/icon/plus.png"></image>
      </view>
      <view class="body_txt">
        <text>2017-07-27</text>
      </view>
    </view>
    <view class="share" wx:if="{{shows}}">
      <input placeholder="這是一個可以自動聚焦的input" auto-focus/>
    </view>

  </view>
</view>

下面的是js中的主要代碼：

  data: {
    shows: false
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },
  share: function () {
    var that = this;
    var sh = that.data.shows;
    that.setData({
      shows: !sh
    })
  },

要知道我們控制的元素有兩個，一個是圖片一個是input框，我們在頁面中使用bindtap="share"進行綁定事件，同時在圖片image和input標簽使用shows變量來控制顯示與隱藏

當我加上循環出現多個元素的時候，意料之中，會變成這個亞子(›´ω`‹ )

這里我們要判斷一下，點擊到標簽的狀態要不同於其它的，改動后的代碼如下：

<view class="conten">
  <view class="header">
    <view class="nav_i">
      <text class="nav_tex">更多內容</text>
    </view>
    <view class="nav_righ" bindtap="mmmm">更多></view>
  </view>
  <block wx:for-items="{{itemm}}">
    <view class="body">
      <view class="data" bindtap="share" id="{{item.id}}">
        <view class="icon">
          <image style="width:19px;height:19px;text-align:conten" wx:if="{{shows==item.id}}" src="/src/icon/minus.png"></image>
          <image style="width:19px;height:19px;text-align:conten" wx:else src="/src/icon/plus.png"></image>
        </view>
        <view class="body_txt">
          <text>2017-07-27</text>
        </view>
      </view>
      <view class='share {{shows==item.id?"show":"hidden"}}'>
        <input placeholder="這是一個可以自動聚焦的input" auto-focus/>
      </view>
    </view>
  </block>
</view>

data: {
    shows: false,
    itemm: [{
      id: 1,
      name: "1111"
    }, {
      id: 2,
      name: "222"
    }, {
      id: 3,
      name: "333"
    }]
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },
  share: function (event) {
    var that = this;
    var sh = that.data.shows;
    var itemId = event.currentTarget.id;
    console.log(itemId)
    if (sh == itemId) {
      that.setData({
        shows: false
      })
    } else {
      that.setData({
        shows: itemId
      })
    }

  },

首先我們在js中的data里面放一些數據，在block中用 wx:for-items循環一下（然並卵我的input並沒有數據，這個先放一下），給每個循環出來的元素加個id，接下來的input用三元運算符來判斷，不要忘記在css加上hidden：{displan:none},我們在js方法中用id和shows變量進行判斷。（這個思路是從網上看到的，記錄一下，有什么描述不當，歡迎指出）