侧边导航栏的实现

侧边导航栏的实现

1.看效果

2.代码实现wxml

<!-- 遮罩层--><viewclass="shade" bindtap="isShow" style="right:{{clickmulu ? '0' : '100%'}}"><!--侧边栏--><viewclass="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:all1s;}.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的内容。