基本思路：上下两层div，宽高等于page的宽高，通过定位设置层级，让上一层div定位在外层。拖动上一层时，动态改变上一层div的translateX的值。这样下层的div就出现了。
<
view
class=
"page">
<
view
class=
"upper"
bindtouchstart=
'start'
bindtouchmove=
'move'
bindtouchend=
'end'
style=
"transform:translateX({{translate}}px);">
<
view
class=
"ico"
bindtap=
'toggle'>
<
image
src=
'../../imgs/more.png'></
image
>
</
view
>
</
view
>
<
view
class=
"down"
>
<
view
class=
"item">首页
</
view
>
<
view
class=
"item">联系人
</
view
>
<
view
class=
"item">关怀机制
</
view
>
<
view
class=
"item">设置
</
view
>
</
view
>
</
view
>
css：
page{
width:
100%;
height:
100%;
position:
relative}
.upper,
.down{
width:
100%;
height:
100%;
position:
absolute;
top:
0;
left:
0}
.upper{
background:
#ccc;
z-index:
100}
.down{
background:
#808080;
color:
#fff}
.ico{
width:
64
rpx;
height:
64
rpx;
position:
absolute;
left:
30
rpx;
top:
30
rpx;}
.ico
image{
width:
100%;
height:
100%;}
.slide{
transform:
translateX(
80%
);
transition:
0.2s;}
.close{
transform:
translateX(
0
);
transition:
0.2s;}
.item{
margin-top:
10
rpx;
line-height:
100
rpx;
height:
100
rpx;
text-indent:
30
rpx;}
js：
//index.js
Page({
data: {
open:
false,
newmark:
0,
mark:
0,
istoright:
0,
slide:
"slide",
close:
"close",
translate:
0
},
//事件处理函数
toggle:
function(){
},
start:
function(e){
var x = e.touches[
0].pageX;
this.setData({
mark:x,
newmark:x
})
// this.data.mark=this.data.newmark=e.touches[0].pageX;
},
move:
function(e){
var x = e.touches[
0].pageX;
this.setData({
newmark: x
})
var disx=
this.data.newmark-
this.data.mark;
if (disx<=
0){
disx=
0
//注意这里的判断。避免拖动从右往左拖时上面一层整个错位
}
this.setData({
translate: disx
})
console.log(
this.data.translate)
},
end:
function(e){
this.setData({
mark:
0,
newmark:
0
})
},
})
注意点：1 不能给上一层页面加transition动画。不然会出现屏幕抖动
2 在move函数中，拖动上一层div从右往左拖动时，当disx的值<0,该div会出现错位，解决的办法就是不然其值小于0.
var disx=
this.data.newmark-
this.data.mark;
if (disx<=
0){
disx=
0
//注意这里的判断。避免拖动从右往左拖时上面一层整个错位
}
3
<
view
class=
"upper"
style=
"transform:translateX({{translate}}px);">
注意这里不能用rpx，否则会报错