精华内容
下载资源
问答
  • 但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。 实现方法: logs.wxml   <...
  • 微信小程序动态显示隐藏

    千次阅读 2017-03-29 16:23:29
    微信小程序开发中可能会遇到这种情况,某个控件会因为按钮的点击显示隐藏,同时按钮的文字也随点击改变。

    微信小程序开发中可能会遇到这种情况,某个控件会因为按钮的点击显示或隐藏,同时按钮的文字也随点击改变。

    如下图所示:

         

    wxml代码:

    
       
        
        
         {{time}}
        
    
       
    


    js代码:
    data: {
      time:'',
      isShow: false
    },
    
    showTime:function(){
      this.setData({
        isShow:(!this.data.isShow),
        time:util.formatTime(new Date()),
      });
    },




    展开全文
  • 微信小程序 实现动态显示隐藏某个控件发布时间:2020-08-23 11:37:13来源:脚本之家阅读:152作者:lqh微信小程序 实现动态显示隐藏某个控件在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。...

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

    发布时间:2020-08-23 11:37:13

    来源:脚本之家

    阅读:152

    作者:lqh

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

    在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。

    因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。

    实现方法:

    logs.wxml

    {{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}

    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属性哪个是否显示

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

    展开全文
  • 主要介绍了微信小程序实现动态显示隐藏某个控件功能,涉及微信小程序事件响应及样式动态操作相关实现技巧,需要的朋友可以参考下
  • 主要介绍了微信小程序 实现动态显示隐藏某个控件的相关资料,需要的朋友可以参考下
  • 微信小程序动态显示隐藏控件

    万次阅读 2017-01-25 08:28:27
    微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: {{...

      在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先


    它的实现方法有两种,

    第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下:

    <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">

       <text class="bright789-text">我是被显示被隐藏控件</text>

     </view>

    第二种方法:叠加法,就是先隐藏,如果是显示,再叠加一个显示,如果是隐藏就不动,代码如下

    <view class="bright789_view_hide {{showView?'bright789_view_show':''}}">

       <text class="bright789-text">我是被显示被隐藏控件</text>

     </view>

       这种办法一开始看有点头晕,所以把它分解成两个状态:

    显示状态:

    因为showView是true,所以我们把它转成如下样子

    <view class="bright789_view_hide bright789_view_show}">

       <text class="bright789-text">我是被显示被隐藏控件</text>

     </view>

    看到了吧,后面的bright789_view_show会把前面的bright789_view_hide重叠上去,注意这里是重叠,所以顺序不能反过来像bright789_view_show {{showView?'':' bright789_view_show '}}这种是不行的

    隐藏状态:

    相当于如下代码:

    <view class="bright789_view_hide }">

       <text class="bright789-text">我是被显示被隐藏控件</text>

     </view>

    最后我把demo的js,wxml和wxss代码贴一下:

    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)

        })

      }

    })

     

    Wxml文件代码:

    <viewclass="page">

      <view >

         <buttonbindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>

      </view>

      <view class="bright789_view_hide{{showView?'bright789_view_show':''}}">

        <textclass="bright789-text">我是被显示被隐藏控件</text>

      </view>

    </view>

     

    Wxss文件代码:

    .bright789-text{

      font-size: 40rpx;

      line-height: 40px;

      color: #ff0000;

    }

    .bright789_view_hide{

        display: none;

    }

    .bright789_view_show{

        display: block;

    }

     

    展开全文
  • 微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一下吧
  • --需要显示隐藏的元素--> <view><text style="display: {{none}};">页面还未开发哦!</text></view> <!--显示或隐藏操作--> <button bindtap="aa">显示或隐藏</button>...

    1.display: none;

    wxml:

    <!--需要显示隐藏的元素-->
    <view><text style="display: {{none}};">页面还未开发哦!</text></view>
    <!--显示或隐藏操作-->
    <button  bindtap="aa">显示或隐藏</button>

    js:

    Page({
    
      data: {
        //初始值设置为显示
        none:"block"
      },
      aa(){
        var that= this
        //判断元素为显示还是隐藏并做相应操作
        if(that.data.none == "none"){
          that.setData({
            none:"block"
          })
        }else{
          that.setData({
            none:"none"
          })
        }
      },
    })

    2.通过wx:if

    wxml:

    <!--需要显示隐藏的元素-->
    <view wx:if="{{none}}"><text >页面还未开发哦!</text></view>
    <!--显示或隐藏操作-->
    <button  bindtap="aa">显示或隐藏</button>

    js:

    Page({
    
      data: {
        //初始值设置为显示
        none:true
      },
      aa(){
        var that= this
        //判断元素为显示还是隐藏并做相应操作
        if(that.data.none == true){
          that.setData({
            none:false
          })
        }else{
          that.setData({
            none:true
          })
        }
      },
    })

     

    展开全文
  • 微信小程序 动态显示隐藏控件

    千次阅读 2018-01-17 14:09:02
    微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,...
  • 视图代码,使用变量控制隐藏类名 &lt;view class='active{{isActive}}'&gt;&lt;/view&gt; 复制代码逻辑层 data:{ isActive:false // 这样就隐藏了 } 当数据请求失败的时候 wx.request({ url: '...
  • 但是小程序的canvas支持的功能实在是少,本来就jquery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。 实现方法: logs.wxml {{show...
  • 主要介绍了微信小程序实践之动态控制组件的显示/隐藏功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • logs.wxml {{showView?‘Click To Check IdleReason’:‘Click To Check MTStatus’}} logs.js Page({ data: { showView: true ...onLoad: function (options) { ...showView: (options.showVie...
  • 微信小程序中,判断显示与显示,或者其他用boolean 类型的值是,用 true 通常能正常显示,但是用false时,却不能隐藏。  下面举2个例子:  1.以 swiper 标签为例 vertical="true" 属性 是设置图片垂直滚动,...
  • 微信小程序动态自定义底部tabBar

    万次阅读 热门讨论 2019-03-20 18:41:36
    微信小程序官方动态自定义底部tabBar 最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的。在网上搜集...
  • 微信小程序_显示隐藏tabbar

    千次阅读 2020-04-22 09:13:53
    wx.hideTabBar和wx.showTabBar 隐藏tabbar wx.hideTabBar({ fail: function() { setTimeout(function() { // 做了个延时重试一次,作为保底。 wx.hideTabBar() }, 500) } }); 显示tabbar wx.showTabBar(...
  • 用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现。往上滑动时,按钮消失。往下滑动时,按钮出现。 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或...
  • 我现在做了个小程序,点击评论时弹出输入框,当点击别的地方或者是在真机上按返回键时让输入框消失,我现在做出的效果是输入框一直在呢,除非评论已经完成,否则输入框一直在的 代码如下: ``` !releaseFocus}}"> ...
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...
  • 微信小程序 多行相同内容分别控制它们的显示与隐藏 如图所示我要分别控制 wuie时的等等线面的一行字的展开收起, 首先这些都是后台数据动态渲染,显然不能通过data里面定义个变量,控制true or false 来操作,...
  • 我发现有些博客还用dispay:none/block来控制显示隐藏 没必要的 微信小程序中官方文档明确表示hidden属性为共同属性类型 我做了一个案例如图 这种常见的tab导航 显示隐藏 (有些私聊我以后要贴代码块 行吧 一...
  • 由于小程序不支持dome操作,因此使用 wx:for 方法实现效果 wxml: &lt;!-- searchArray 循环遍历的对象 wx:for-item="item" 别名item bindtap='showList' 绑定点击事件 data-id='{{item.id}}' 将...
  • 用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现。往上滑动时,按钮消失。往下滑动时,按钮出现。 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,160
精华内容 3,264
关键字:

微信小程序动态显示与隐藏

微信小程序 订阅