小程序 侧边栏

css
.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;
}

js
// 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: ‘’,
})
}
})