微信小程序实现控件功能示例的动态显示和隐藏

本文给出了一个用微信小程序动态显示和隐藏控件的例子。分享给大家参考，如下：

在开发小程序的过程中，往往需要隐藏一定的控件。

因为项目本来需要切换两个画布，但是小程序的画布支持的功能真的很少。本来jquery mobile或者将canvas转换成图片很容易达到滑动效果，但是不支持。最后我们只能做一个画布，需要的时候可以显示，不需要的时候可以隐藏。

实现方法：

logs.wxml

视图按钮bind tap=' OnChangeShowState ' { ShowView？单击以检查空闲原因' : '单击以检查MTS tatus ' } }/button/view view class=' { { showView？'bright 789 _ view _ show ' : ' bright 789 _ view _ hide ' } ' canvas-id=' piecanvas 1 ' style=' width :400 px；' height:280px'/canvas/viewlogs.js

page({ data : { show view : true }，onload :函数(选项){//生命周期函数-听页面加载showview3360(选项。showview==' true '？true : false) }，onChangeShowState:函数(){ var即=thisthat . setdata({ showview3360(！that.data.showView) }) }，})log . wxss

. bright 789 _ view _ hide { display : none；} . bright 789 _ view _ show { display : }块；}从上面三页的文件中可以清楚的看到其中的逻辑：logs.wxml的onChangeShowState按钮会触发logs.js中的一个事件，这个事件会改变showView的值。在logs.wxml中，canvas的class属性将根据showView的值来确定，在logs.wxss中，这两个class属性中的哪一个将被设置为show或not。

上述代码的运行效果如下：

注：有关微信小程序组件的更多信息，请参考：http://tools.jb51.net/table/wx_component

希望本文对微信小程序的开发有所帮助。