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

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

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

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