微信小程序 实现动态显示和隐藏某个控件

微信小程序动态显示与隐藏控件的技巧

在微信小程序开发中，我们经常需要根据不同需求动态显示或隐藏某些控件。比如在一个项目中，需要切换两个canvas时，由于小程序canvas功能有限，无法实现滑动效果，因此我们需要一个canvas在需要时显示，不需要时隐藏。

以下是实现这一功能的具体步骤：

一、WXML页面结构设置

在WXML文件中，我们设置一个button按钮和一个需要动态显示的canvas控件。通过改变canvas的class属性，可以实现显示与隐藏的效果。

```html

{{showView?'点击隐藏canvas':'点击显示canvas'}}

```

二、JS逻辑处理

在JS文件中，我们设置一个showView的数据项，用于控制canvas的显示与隐藏。通过按钮点击事件，改变showView的值。

```javascript

Page({

data: {

showView: true

},

onLoad: function (options) {

this.showView = (options.showView == "true" ? true : false)

},

onChangeShowState: function () {

var that = this;

that.setData({

showView: (!that.data.showView)

})

}

})

```

三、WXSS样式设置

在WXSS文件中，我们定义两个class，一个用于隐藏元素（bright789_view_hide），另一个用于显示元素（bright789_view_show）。通过改变元素的class属性，实现显示与隐藏的效果。

```css

.bright789_view_hide{

display: none;

}

.bright789_view_show{

display: block;

}

```

通过以上三个步骤，我们就可以实现微信小程序的动态显示和隐藏某个控件的功能。通过这种方式，我们可以轻松地在小程序中实现一些复杂的交互效果。感谢大家的阅读，希望能对大家有所帮助，谢谢对本站的支持！