微信小程序动态的显示或隐藏控件，带参传递的界面跳转的两种方式 ... ...

作者：bright789，来自原文地址

一：动态的显示或隐藏控件

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

a42ea4a0a075bcf3de1b0d083208836d.gif (47.63 KB, 下载次数: 32)

下载附件

2018-5-17 17:49 上传

它的实现方法有两种：

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

<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;
}

二：带参传递的界面跳转的两种方式

之前有个微信小程序群友提出一个问题，就是在使用跳转时，在js代码里写带参数界面跳转会出问题，一直搞不定，因为年尾工作忙和事情多的原因，一直没有时间弄，这两天闲下来了，就试了试两种，发现没有问题，于是把它分享出来！

第一种：使用xwml文件里面在要跳转的views外面加标签, 这里包括一个或者多个view,navigator标签里面有一个url属性，在url属性后面加上key-value参数就可以传参了,示例代码如下:

    <navigatorurl="component-pages/wx-Go-bring-params/index?val=i am bright789!!!&showBtn=true" class="widget">
           <textclass="widget__name">跳转传参</text>
           <imageclass="widget__arrow" src="resources/arrow.png"background-size="cover" />
     </navigator>

这里的参数val和showBtn在下个界面的js文件的onLoad()函数里面接收保存使用，示例代码如下 :

onLoad:function(options){
   // 生命周期函数--监听页面加载
   var that=this;
   console.log('onLoad is invoked');
   console.log(options);
   that.setData({
        lastval:options.val,
        oldval:options.oldval,
        showBtn:(options.showBtn=="true"?true:false),
    })
  },

这里要特别说明的是我们在传key-values参数时,即使我们做的是bool值，它也会当作是字符串，所以要做转换处理，不然会产生意想不到的结果。

第二种：使用bindtap事件绑定view，再在js文件里的tap回调函数使用代码wx. navigateTo()函数实现，其中wx. navigateTo()函数要传一个object参数，而object里面就可以带url，这里的url与方法1的差不多，都是后面跟key-value参,不同的是它的变量要使用that.data.lastval这里方式,而方法1的就使用{{lastval}}这里方式，示例代码如下: 
Wxml文件:

<button type="default"bindtap="onBtnClick">跳转到新页面</button>

Js文件:

 onBtnClick:function(){
   var that=this;
   console.log('onBtnClick');
    wx.navigateTo({
     url:'index?oldval='+that.data.lastval+'&val=hello,bright789!!!&showBtn=false',
     success: function(res){
       // success
       console.log('onBtnClick success() res:');
     },
     fail: function() {
       // fail
       console.log('onBtnClick fail() !!!');
     },
     complete: function() {
       console.log('onBtnClick complete() !!!');
       // complete
     }
   })
  }

此外附上官方文档说明:

6925c8434a607c53c8c7ddd9d5c18e47.png (50.43 KB, 下载次数: 36)

下载附件

2018-5-17 17:49 上传

效果如下图：

ccfc0951b2a537cf97784be04b5ce23a.gif (388.04 KB, 下载次数: 33)

下载附件

2018-5-17 17:49 上传

最后附上完整的js和wxml文件: 
Js文件:

Page({
 data:{
     lastval:{},
     showBtn:false,
  },
 onLoad:function(options){
   // 生命周期函数--监听页面加载
   var that=this;
   console.log('onLoad is invoked');
   console.log(options);
   that.setData({
        lastval:options.val,
        oldval:options.oldval,
        showBtn:(options.showBtn=="true"?true:false),
    })
  },
 onBtnClick:function(){
   var that=this;
   console.log('onBtnClick');
   wx.navigateTo({
     url: 'index?oldval='+that.data.lastval+'&val=hello,bright789!!!&showBtn=false',
     success: function(res){
       // success
       console.log('onBtnClick success() res:');
     },
     fail: function() {
       // fail
       console.log('onBtnClick fail() !!!');
     },
     complete: function() {
       console.log('onBtnClick complete() !!!');
       // complete
     }
   })
  }
})

Wxml文件:

<view class="page">
   <text class="page__title">新数据:{{lastval}}</text>
   <view class=" {{oldval ?'bright789_widgets_show':'bright789_widgets_hide'}}"></view>
   <text class="page__title">旧数据:{{oldval}}</text>
   <view class="bright789_widgets_hide {{showBtn ?'bright789_widgets_show':''}}">
       <button type="default" bindtap="onBtnClick">跳转到新页面</button>
   </view>
</view>