微信小程序开发实现侧滑栏

问题背景

本文将介绍微信小程序开发过程如何去实现侧滑栏的一个思路，右侧展示页面不动，左侧导航滑动，点击侧滑栏出现，遮住部分展示页面。

问题分析

先上效果图如下：

问题解决

话不多说，直接上代码。
（1）index.js文件，代码如下：

var app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    text: 'ES6学习',
    nav_list: ['ES6学习基础', 'CSS特效', 'VUE实战', '微信小程序'],
    open: false
  },
  //列表的操作函数
  open_list: function (opts) {
    this.setData({ text: opts.currentTarget.dataset.title, open: false });
  },
  //左侧导航的开关函数
  off_canvas: function () {
    this.data.open ? this.setData({ open: false }) : this.setData({ open: true });
  },
  /**
* 生命周期函数--监听页面显示
*/
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,
      });
    }
  }
})

（2）index.wxml文件，代码如下：

<view class="page">
  <view class="page-top {
   
   {open ? 'page-top-show' : ''}}">
    <view class="nav-list" wx:for-items="{
   
   {nav_list}}" bindtap="open_list" data-title="{
   
   {item}}">
      <text>{
   
   {item}}</text>
    </view>
  </view>
  <view class="page-bottom">
    <image class="off-nav-list" bindtap="off_canvas" src="../../static/img/ic_arrow_right.png"></image>
    <view class="page-bottom-content">
      <text>{
   
   {text}}</text>
    </view>
    <view class="page-mask {
   
   {open ? '' : 'page-mask-hide'}}" bindtap="off_canvas"></view>
  </view>
</view>

（3）index.wxss文件，代码如下：

page,.page {
  height: 100%;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
}
/*左侧导航  */
.page-top{
  position: fixed;
  width: 75%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(0, 68, 97);
  transform: rotate(0deg) scale(1) translate(-100%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(-100%,0%); 
  transition: all 0.4s ease;
  z-index: 998;
}
.page-top-show{
  transform: rotate(0deg) scale(1) translate(0%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(0%,0%); 
}
.nav-list{
  padding: 30rpx 0 30rpx 40rpx;
  color:#fff;
}
 
.page-bottom{
  height: 100%;
  background-color: rgb(57, 125, 230);
  position: relative;
}
.off-nav-list{
  position: fixed;
  width: 60rpx;
  height: 50rpx;
  top: 20rpx;
  left:20rpx;
}
.page-bottom-content{
  padding:100rpx 20rpx 30rpx;
  color: #fff;
}
.page-mask{
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.5); 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.page-mask-hide{
  display: none;
}

问题总结

本文介绍了微信小程序开发过程如何去实现侧滑栏的一个思路，右侧展示页面不动，左侧导航滑动，点击侧滑栏出现，遮住部分展示页面，有兴趣的同学可以进一步深入研究。