微信小程序点击控制元素的显示与隐藏

微信小程序点击控制元素的显示与隐藏

首先我们先来看一下单个点击效果

我们来看一下wxml中的代码：

  
    
      更多内容
    
    更多>
  
  
    
      
        
        
      
      
        2017-07-27
      
    
    
      
    

  

下面的是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变量来控制显示与隐藏

当我加上循环出现多个元素的时候，意料之中，会变成这个亚子(›´ω`‹ )

这里我们要判断一下，点击到标签的状态要不同于其它的，改动后的代码如下：

  
    
      更多内容
    
    更多>
  
  
    
      
        
          
          
        
        
          2017-07-27
        
      
      
        
      
    
  

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变量进行判断。（这个思路是从网上看到的，记录一下，有什么描述不当，欢迎指出）