微信小程序隐藏显示事件怎么实现
编辑:小飞燕 发布时间:2021-03-09 08:04:46
如何通过微信小程序隐藏和显示事件?各位微信小程序开发者,如果微信小程序隐藏显示,可以参考以下小系列编译的内容。接下来的内容是微信小程序隐藏和显示事件的实现方法。
如何通过微信小程序隐藏和显示事件?
在开发小程序的过程中,往往需要隐藏一定的控件。
因为项目本来需要切换两个画布,但是小程序的画布支持的功能真的很少。本来jquerymobile或者将canvas转换成图片很容易达到滑动效果,但是不支持。比较后只能做一个画布,需要的时候可以显示,不需要的时候可以隐藏。
微信小程序隐藏显示的实现方法;
logs.wxml微信小程序代码:
logs.js文件:
页面({
数据: {
showview: true
},
onload:函数(选项){
//生命周期功能-监控页面加载
show view :(options . show view==' true '?true : false)
}
,onchangeshowstate:函数{
that=this
that.setdata({
showview:(!that.data.showview)
})
},
})
logs.wxss微信小程序代码:
. bright789_view_hide{
display:无;
}
. bright789_view_show{
display:块;
}
逻辑可以从上面三个小程序页面的文件中看得很清楚:log . wxml的onchangeshowstate按钮会触发logs.js中的一个事件,这个事件会改变showview的值,而canvas的class属性会根据log . wxml中showview的值来决定,两个class属性中的哪一个会在logs.wxss中设置
这里是标题的开头,如何实现小程序的切换风格,这里是标题的结尾
微信小程序的风格有很多。如果你想吸引用户的注意力,你应该把它设计得更特别。应该如何切换小程序的样式?看下面具体流程。
小程序的按钮变化与其类型属性有关,它的三个默认属性是:default ',' primary '和' warn ',其中default '是灰色属性,primary是蓝色,warn是红色,不能改变。
按钮1
按钮2
按钮3
按钮4
你可以看到这三个属性的button的类名是btn,为btn设置背景色时,发现只有不带类型的背景色发生了变化。(这个其实挺坑的。一个月前,改变颜色是默认属性。只用了很长时间就改变了。小程序还在成长,技术写不死。也许随时会改变。)。btn { margin-top :10 px;背景色:黄色;}
按钮1
按钮2
按钮3
设置按钮-悬停在wxss作为一种风格,以改变其状态。目前,我只发现状态样式可以在没有类型属性时生效:
。btn-hover:{ background-color : pink;}
而其他按钮悬停比按钮悬停优先级高。比如同时设置背景色会有设置的效果。other-button-hover,当没有type属性时当然会生效。
。button-hover { background : black;}
此时,样式为黑色
。button-hover { background : black;}。btn-hover { background-color :蓝色;}
此时,样式为蓝色
上一篇:微信小程序访问数据库是怎么实现的
下一篇:小程序直播demo包含哪些
猜你喜欢
-
12个小程序隐藏技巧556人喜欢
微信小程序隐藏头部功能有哪些?微信小程序的隐藏功能相信很多的网友都不知道。您是不是很好奇呢?小编来告诉您微信小程序隐藏头部的功能有哪些。希望以下的内容能满足您的好奇心哦。一、小程序切换微信小程序和小程序、小程序和聊天界面可以迅速切换。二、消…
更新时间:2020-08-26 21:08:15
-
微信小程序隐藏头部功能有哪些95人喜欢
微信小程序有哪些隐藏的头像功能?相信很多网友都不知道微信小程序的隐藏功能。你好奇吗?小编告诉你微信隐藏头像小程序的功能是什么。希望以下内容能满足你的好奇心。第一,小程序切换微信小程…
更新时间:2021-03-25 07:04:23
-
微信小程序隐藏显示事件怎么实现67人喜欢
如何通过微信小程序隐藏和显示事件?各位微信小程序开发者,如果微信小程序点击隐藏显示,可以参考以下小系列编译的内容。接下来的内容是微信小程序隐藏和显示事件的实现方法。如何通过微信小程…
更新时间:2021-03-09 08:04:46
-
微信小程序隐藏导航条怎么实现55人喜欢
如何在微信小程序中隐藏导航条?下面是如何实现小编编译的微信小程序的隐藏导航栏和部分微信小程序代码。如果微信父母想设置微信小程序的隐藏导航栏,不妨往下看一看。如何在微信小程序中隐藏导…
更新时间:2021-04-19 10:21:21
-
微信小程序隐藏view怎么设置54人喜欢
在开发小程序的过程中,有很多细节需要注意,尤其是小程序开发技术的掌握。微信小程序隐藏视图怎么设置?接下来,我会告诉你如何隐藏小程序视图,让我们来看看相关的信息。其实需求很简单,就是…
更新时间:2021-04-20 10:30:12
-
如何通过微信小程序隐藏navigationba ba?下面是小编编译的微信小程序隐藏的navigationba实现所需的微信小程序代码。如果你想让微信隐藏导航条,请跟随小编。如何通过微信小程序隐藏navigation…
更新时间:2021-04-20 10:13:29
-
微信小程序隐藏滚动条怎么设置3人喜欢
为了让小程序页面更简洁美观,开发者经常设置隐藏滚动条,那么微信小程序的隐藏滚动条如何设置呢?这里小编想介绍一下如何通过滚动条查看隐藏滚动条,这是微信小程序隐藏滚动条最简单的方法。下…
更新时间:2021-03-08 08:49:31