微信小程序侧边栏的实现代码，（改变主页原位置）

.wxml代码

<view class="page">

  <!-- 侧边栏内容 -->

  <view class="page-slidebar">

    <view class="page-content">

        <input class="wc" type="text" wx:for="{{array}}" wx:key="index" value="{{array[index]}}" />

        <!-- <input type="text" wx:fo9r="{{array}}" wx:key="index" wx:for-item="item" value="{{item}}" /> -->

    </view>

  </view>

  <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">

    <view class='content'> 

      <button bindtap="tap_ch">按钮</button>

    </view>

  </view>

</view>

 

.wxss代码

/* 全局样式 */

page, .page {

  height: 100%;

  font-family: 'PingFang SC',

         'Helvetica Neue',

         Helvetica,

         'Droid Sans Fallback',

         'Microsoft Yachei',

         sans-serif;

} 

/* 侧边栏样式 */

.page-slidebar {

  height: 100%;

  width: 750rpx;

  position: fixed;

  background-color:white;

  z-index: 0;

}

 

/* 控制侧边栏的内容距离顶部的距离 */

.page-content {

  padding-top: 60rpx;

}

 

/* 侧边栏内容的 css 样式 */

.wc {

  color:black;

  padding: 30rpx 0 30rpx 150rpx;

  border-bottom: 1px solid #eee; 

}

 

/* 当屏幕向左滑动出现侧边栏的时候主页的动画样式 */

/* scale：取值范围 0~1 表示屏幕大小是原来的百分之几可以自己修改成 0.8 试下*/

/* translate(60%,0%) 表示向左滑动的时候侧边栏占用平时的宽度为 60%  */

.c-state {

  transform: rotate(0deg) scale(1) translate(60%, 0%);

  -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);

}

 

/* 主页样式 */

.page-top {

  height: 100%;

  position: fixed;

  width: 750rpx;

  background-color:white;

  z-index: 0;

  transition: All 0.4s ease;

  -webkit-transition: All 0.4s ease;

}

/* 左上角图标的样式 */

.page-top image {

  position: absolute;

  width: 68rpx;

  height: 68rpx;

  left: 20rpx;

  top: 20rpx;

}

 

/* 遮盖层样式 */

.cover{

  width: 100%;

  height: 100%;

  background-color:gray;

  opacity: 0.5;

  z-index: 9000;

}

 

.content{

  margin-top: 100rpx; 

}

 

.js代码

Page({ 

  data: {

    open: false,

    // mark 是指原点x轴坐标

    mark: 0,

    array:["李知恩","霍建华","杨幂","迪丽热巴","古力娜扎"],

    // newmark 是指移动的最新点的x轴坐标 

    newmark: 0,

    istoright: true

  }, 

  // 点击左上角小图标事件

  tap_ch: function(e) {

    if (this.data.open) {

      this.setData({

        open: false

      });

    } else {

      this.setData({

        open: true

      });

    }

  },

 

  tap_start: function(e) {

    // touchstart事件

    // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark

    this.data.mark = this.data.newmark = e.touches[0].pageX;

  },

 

  tap_drag: function(e) {

    // touchmove事件

    this.data.newmark = e.touches[0].pageX;

    

    // 手指从左向右移动

    if (this.data.mark < this.data.newmark) {

      this.istoright = true;

    }

    

    // 手指从右向左移动

    if (this.data.mark > this.data.newmark) {

      this.istoright = false;

    }

    this.data.mark = this.data.newmark;

  },

 

  tap_end: function(e) {

    // touchend事件

    this.data.mark = 0;

    this.data.newmark = 0;

    // 通过改变 opne 的值让主页加上滑动的样式

    if (this.istoright) {

      this.setData({

        open: true

      });

    } else {

      this.setData({

        open: false

      });

    }

  }

})