【微信小程序】侧滑栏，手动侧滑出个人中心（完整代码附效果图）

 有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

微信小程序开发交流qq群   173683895  、 526474645 ；

正文：

博文分三部分，1.效果图及功能效果说明  2.实现思路  3.源代码  欢迎加入微信小程序开发交流群（173683895）

一.老惯例先上效果图，本篇博文实现了微信小程序的侧滑栏效果，有两种侧滑方式，

1.手指触摸滑动

（1）.手指触摸页面向左滑动开始到结束的距离超过设定的距离就会滑出个人中心

（2）.手指触摸页面向右滑动开始到结束的距离超过设定的距离就会隐藏个人中心

2.点击事件

（1）.点击图标滑出侧滑栏

（2）.出现个人中心的侧滑栏之后点击遮罩层可隐藏侧滑栏。

二. 实现思路 :
1.把页面分成三个部分， 第一，侧滑栏部分， 第二，主页部分 ， 第三遮罩层部分，首先侧滑栏和遮罩层都不能显示，所以设置主页的权重为(z-index:1)，侧滑栏权重（z-index:0），遮罩层（display:none; ）隐藏
2.写四个事件 ， 分别是
滑动侧滑手指触摸开始事件
滑动侧滑手指触摸结束事件
点击遮罩栏返回主页事件
点击图片出现侧滑动画事件
3.获取屏幕的宽度：wx.getSystemInfoSync().windowWidth,并且创建两个全局变量var start_clientX;var end_clientX;
，用于保存手指触摸开始的坐标和手指触摸结束时的坐标，当执行滑动侧滑手指触摸结束事件 时，执行判断语句
if (end_clientX - start_clientX > 50) {
this.setData({
display: "block",
translate: 'transform: translateX(' + this.data.windowWidth * 0.7 + 'px);'
})
}
translate（绑定主页的style）会往右边平移屏幕宽度的百分之70；这样就实现了


4.点击遮罩层隐藏侧滑栏
// 点击遮罩栏返回主页事件
hideview: function () {
this.setData({
display: "none",
translate: '',
})
}, 
display（绑定遮罩层的）值为none 隐藏遮罩层，
translate（绑定主页的style） 清空刚才设置的平移的样式，因为主页的权重(z-index:1)比侧滑栏权重（z-index:0）高,所以这里就实现
了返回主页。
5.实现点击图片出现侧滑栏
// 点击出现侧滑动画
tap_ch: function (e) {
this.setData({
display: "block",
translate: 'transform: translateX(' + this.data.windowWidth * 0.7 + 'px);'
})
},
代码同3，不做讲解了。

三.完整源代码

 

<view class="page" bindtouchend='touchend' bindtouchstart='touchstart'>
  <!-- 侧滑栏 -->
  <view class="page_tab">
    <block wx:if="{{user_name ===''}}">
      <navigator url='../login/login'>
        <image class='user_head' src='../../image/user_head.png'></image>
        <view class='user_name'>未登录</view>
      </navigator>
    </block>
    <block wx:else>
      <image class='user_head' src='{{user_head}}'></image>
      <view class='user_name'>{{user_name}}</view>
    </block>
    <view class="page_tab_content">
      <navigator url='../order/order'>
        <view class="wc">
          <image src='../../image/indent.png'></image>
          <text>订单记录</text>
        </view>
      </navigator>
      <view class="wc">
        <image src='../../image/my_profile.png'></image>
        <text bindtap='tosat'>我的资料</text>
      </view>
      <view class="wc">
        <view style='position:absolute;opacity: 0;   top: 10px; '>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
          <contact-button size="27" class='pos'></contact-button>
        </view>
        <image src='../../image/customer_service.png'></image>
        <text>客服中心</text>
      </view>
      <navigator url='../news/news'>
        <view class="wc">
          <image src='../../image/platform_consulting.png'></image>
          <text>平台资讯</text>
        </view>
      </navigator>
      <navigator url='../to_my/to_my'>
        <view class="wc">
          <image src='../../image/platform_consulting.png'></image>
          <text>关于我们</text>
        </view>
      </navigator>
      <navigator url='my_dz/my_dz'>
        <view class="wc">
          <image src='../../image/my_address.png'></image>
          <text>我的地址</text>
        </view>
      </navigator>
      <button wx:if="{{btn_val != '登录'}}" catchtap='register'>{{btn_val}}</button>
      <button wx:else catchtap='register'>{{btn_val}}</button>
    </view>
  </view>
  <view class="bg" bindtap='hideview' style='display:{{display}}'></view>
  <!-- 主页 -->
  <view class="home" style="{{translate}}">
    <image class='icon_user' bindtap='showview' src="../../image/icon_user.png"></image>
    <image class='icon_cart' id='1' src="../../image/cart.png"></image>
    <!-- <text> 运输机械</text> -->
    <text> 我的机型</text>
    <!-- 主页tab -->
    <view class='home_tab' style='margin-top: 20rpx;'>
      <view class='page_row'>
        <block wx:for="{{k1}}" wx:key="index">
          <view class='title {{home_tab ==index?"on":""}}' catchtap='home_tab_click' data-id='{{item.id}}' data-on='{{index}}'>{{item.title}}</view>
        </block>
      </view>
    </view>
  </view>
</view>

 

var start_clientX;
var end_clientX;
const app = getApp()
const util = require("../../utils/util.js")
Page({
  data: {
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
  // 滑动开始
  touchstart: function (e) {
    start_clientX = e.changedTouches[0].clientX
  },
  // 滑动结束
  touchend: function (e) {
    end_clientX = e.changedTouches[0].clientX;
    if (end_clientX - start_clientX > 120) {
      this.setData({
        display: "block",
        translate: 'transform: translateX(' + this.data.windowWidth * 0.7 + 'px);'
      })
    } else if (start_clientX - end_clientX > 0) {
      this.setData({
        display: "none",
        translate: ''
      })
    }
  },
  // 头像
  showview: function () {
    this.setData({
      display: "block",
      translate: 'transform: translateX(' + this.data.windowWidth * 0.7 + 'px);'
    })
  },
  // 遮拦
  hideview: function () {
    this.setData({
      display: "none",
      translate: '',
    })
  }
})

page{  
  height: 100%  
}  
/* 主页 */  
.home {  
  position: absolute;  
  width: 750rpx;  
  height: 100%;  
  background-color: white;  
  z-index: 1;  
  transition: All 0.4s ease;  
  -webkit-transition: All 0.4s ease;  
}  
.home .icon_user {  
  width: 68rpx;  
  height: 68rpx;  
  margin-left: 20rpx;  
  margin-top: 20rpx;  
}  
/* 遮罩层 */  
.bg {    
  display: none;    
  position: fixed;    
  top: 0%;    
  left: 70%;    
  width: 100%;    
  height: 100%;    
  background-color: black;    
  z-index: 1001;    
  -moz-opacity: 0.7;    
  opacity: 0.70;    
  transition:width 2s;  
  filter: alpha(opacity=70);    
}   
 /* 侧滑栏 */  
.page_tab {  
  height: 100%;  
  width: 750rpx;  
  position: fixed;  
  background-color: white;  
  z-index: 0;  
}  
  
.page_tab_content .wc {  
  color: #000;  
  position: relative;  
  font-size: 32rpx;  
  padding: 20rpx 0 30rpx 20rpx;  
}  
  
.page_tab_content button {  
  width: 280rpx;  
  background: #fb9817;  
  color: #fff;  
  position: relative;  
  right: 120rpx;  
  top: 150rpx;  
  height: 60rpx;  
  line-height: 60rpx;  
}  
  
.page_tab_content image {  
  display: inline-block;  
  height: 40rpx;  
  width: 40rpx;  
  margin-right: 60rpx;  
}  
  
.user_head {  
  width: 120rpx;  
  height: 120rpx;  
  border-radius: 50%;  
  text-align: center;  
  margin: 80rpx 80rpx 80rpx 205rpx;  
}