侧边导航栏的实现

侧边导航栏的实现

1.看效果

2.代码实现wxml

      <!-- 遮罩层 -->
   <view class="shade" bindtap="isShow" style="right:{{clickmulu ? '0' : '100%'}}">
   <!--侧边栏-->
     <view class="leftNavigation" style="right:{{clickmulu ? '0' : '-60%'}}">
     //写入侧导航栏的页面代码
     </view>
   </view>

2.css代码

.leftNavigation{
  position: absolute;
  top: 0rpx;
  right: 500rpx;
  z-index: 2;
  width: 50%;
  border-radius: 20rpx;
  height: 100%;
  background-color:white;
  transition:all 1s; 
}
.shade{
  position: absolute; 
  width:100%;   
  height:100%;   
  top:0;   
  background:rgba(0,0,0,0.5);   
  overflow: hidden;   
  /*要显示在wrap的上面 */   
  z-index: 1;    
}

3.js代码

data:{
clickmulu:flase
},
//开始先显示遮罩层再加载动画显示侧边栏
clickMenu: function (params) {
  if (this.data.clickmulu!= true) {
    this.setData({
      clickmulu: true
    })
  }else{
    this.setData({
      clickmulu:false
    })
  }
},
isShow(){
  if (this.data.clickmulu != false) {
    this.setData({
      clickmulu: false
    })
  }else{
    this.setData({
      clickmulu:true
    })
  }
},

二，总结

这个功能还是比较容易实现的，首先在vxml的页面通过三元运算符的来控制页面的布局距离屏幕右边的距离。
在js中通过控制布尔值的真假来控制页面的距离右边的距离。从而实现测导航的功能。

知识点一：
侧导航栏过得效果则是由Transition 来实现。
Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。
transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型
transition:all 1s中的默认值是all意味着所有的属性都包含在里面。1s为过渡的时间。

知识点二
z-index:可以设置元素的叠加顺序，但依赖定位属性。
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖
z-index的数值是元素叠加的顺序

知识点三
三运算符主要是以a？b:c的形式书写。这种运算符的运算机制是如果a为真则显示b的内容否则显示c的内容。