微信小程序 实现动态显示和隐藏某个控件
微信小程序 实现动态显示和隐藏某个控件
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。
因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。
实现方法:
logs.wxml
<view> <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button> </view> <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <canvas canvas-id="pieCanvas1" style="width:400px;height:280px;"></canvas> </view>
logs.js
Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函数--监听页面加载 showView: (options.showView == "true" ? true : false) } , onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView) }) }, })
logs.wxss
.bright789_view_hide{ display: none; } .bright789_view_show{ display: block; }
从上面三个页面的文件可以很明显看出逻辑:logs.wxml的onChangeShowState按钮会在logs.js中触发一个事件,它会改变showView的值,而在logs.wxml中会根据showView的值确定画布canvas的class属性,而在logs.wxss中具体再设置两个class属性哪个是否显示
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序 input输入框控件详解及实例(多种示例)
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
-
微信小程序动态的显示或隐藏控件的方法(两种方法)
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>
-
微信小程序 实现动态显示和隐藏某个控件
微信小程序 实现动态显示和隐藏某个控件 在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChangeShowState">{{sh
-
微信小程序实现动态显示和隐藏某个控件功能示例
本文实例讲述了微信小程序实现动态显示和隐藏某个控件功能.分享给大家供大家参考,具体如下: 在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jquery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChan
-
微信小程序之滑动页面隐藏和显示组件功能的实现代码
用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD
-
微信小程序-横向滑动scroll-view隐藏滚动条
wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><
-
微信小程序视图控件与bindtap之间的问题的解决
在微信小程序中 最常用的<view>控件 可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType="123">的形式绑定ItemOnclick事件并传递一个dataset,其包含一个名为mType的元素 值为123. 在某一次设计中 有如下结构: <view class="func-m" bindtap="ItemOnclick" data
-
微信小程序实现列表左右滑动
做微信小程序开发,和app一样经常会用到列表左右滑动操作(删除等),目前微信小程序官方没有提供相应的控件. 只能我们自己来做,方法很多,我这里给个思路,仅供参考,欢迎讨论. 1.我们可以把列表的元素放在scroll-view控件中,并且让scroll-view实现横向滑动 2.把列表内容项的宽度占满手机宽度,利用rpx特性(自适应屏幕),默认iphon6就是750rpx,只要设置大于等于750rpx就可以. 3.监听滑动后列表操作事件,即可 细节点: (1)scroll-view实现横向滑动,这
-
微信小程序数字滚动插件使用详解
用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <!--pages/main/index.wxml--><view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co
-
微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px
-
微信小程序实现滚动消息通知
本文实例为大家分享了微信小程序实现滚动消息的具体代码,供大家参考,具体内容如下 效果图: index.wxml <!--index.wxml--> <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for=&quo
-
微信小程序实现YDUI的ScrollNav组件
本文实例为大家分享了微信小程序实现滚动导航效果的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 实现原理 采用双 scroll-view 组件实现双滚动! WXML <!--导航滚动 --> <scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="t
随机推荐
- ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
- IIS服务器中 ASP.NET State Service 开启后 Session 仍容易丢失的问题终极解决办法
- JavaScript 直接操作本地文件的实现代码
- php实现阿拉伯数字和罗马数字相互转换的方法
- Android 将文件下载到指定目录的实现代码
- 利用jQuery实现漂亮的圆形进度条倒计时插件
- 详解浏览器渲染页面过程
- 熊猫烧香病毒的手工清除技巧 附专杀工具
- Android系统联系人全特效实现(上)分组导航和挤压动画(附源码)
- sql server 2000管理单元初始化失败的解决方法
- Treegrid的动态加载实例代码
- 基于jQuery实现顶部导航栏功能
- Android系统永不锁屏永不休眠的方法
- C#中系统时间和UNIX时间戳互相转换
- javascript自动给文本url地址增加链接的方法分享
- vue cli构建的项目中请求代理与项目打包问题
- asp.net core 获取 MacAddress 地址方法示例
- 微信小程序功能之全屏滚动效果的实现代码
- python图形绘制奥运五环实例讲解
- Python实现去除列表中重复元素的方法总结【7种方法】