微信小程序----侧滑导航

这次是本章的效果图！（上图）

点击左上标的图标，红色的会弹出来，再点一下就可以收回去

接下来讲讲如何实现

首先

想想思路

红色和蓝色当然是两块<view>

第一次点击红色弹出（就是红色在屏幕外面）

第二次点击红色缩回去（也就是那个图标控制的是红色方块移动）

以上是第一种思路

那么第二种思路呢？

扫描二维码关注公众号，回复： 1920004 查看本文章

对的，相反的第一次点击，相当于蓝色向右缩进

第二次点击，蓝色向左移动（红色在蓝色下面）

我这里面使用了第二种方法

首先：我们写两个盒子：

WXML:

<view class="page">
  <view class="page-top">
    <image src='../images/daohang.png'></image>
  </view>
  <view class="page-content">
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
  </view>
</view>

WXSS:

.page-content{
  height: 100%;
  width: 30%;
  background: red;
  position: fixed;
  padding-top: 100rpx;
  z-index: 0;
}
.item{
  color: white;
  padding: 50rpx 0 30rpx 30rpx;
}
.page-top{
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  background: blue;
  transition: All 0.4s ease;
}
.page-top image{
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  left: 20rpx;
  top: 20rpx;
}

此时蓝色是完全盖住红色的

接下来加个点击事件挂在图标上面

我们点击一次弹出，点击一次缩回

我们可以这样做：

在蓝色盒子上挂一个class属性，有这个属性的时候，弹出，没有就缩回

还有一个点击事件

所以我们的代码这样写：

WXML：

 <view class="page-top {{flag?'pop':''}}" >
    <image src='../images/daohang.png' bindtap='func'></image>
  </view>

JS：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag:false
  },
  func:function(){
    if(this.data.flag){
      this.setData({
        flag:false
      })
    }else{
      this.setData({
        flag:true
      })
    }
  }
})

WXSS：

.pop{
  transform:scale(1) translate(30%,0%);
}

这样子就完成了！

微信小程序----侧滑导航

猜你喜欢