基本思路：上下兩層div，寬高等於page的寬高，通過定位設定層級，讓上一層div定位在外層。拖動上一層時，動態改變上一層div的translatex的值。這樣下層的div就出現了。
html：
<
view
class=
"page">
<
view
class=
"upper"
bindtouchstart=
'start'
bindtouchmove=
'move'
bindtouchend=
'end'
style=
"transform:translatex(}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
.upper,
.down
.upper
.down
.ico
.ico
image
.slide
.close
.item
js：
page(,
//事件處理函式
toggle:
function(),
start:
function(e))
// this.data.mark=this.data.newmark=e.touches[0].pagex;
},move:
function(e))
var disx=
this.data.newmark-
this.data.mark;
if (disx<=
0)this.setdata()
console.log(
this.data.translate)
},
end:
function(e))
},
})
2 在move函式中，拖動上一層div從右往左拖動時，當disx的值<0,該div會出現錯位，解決的辦法就是不然其值小於0.
var disx=
this.data.newmark-
this.data.mark;
if (disx<=
0)3 <
view
class=
"upper"
style=
"transform:translatex(}px);">
注意這裡不能用rpx，否則會報錯
微信小程式側滑刪除
直接上乾貨吧 wxml 刪除wxss view,label,textarea,input hd con hd con listitem hd con list hd con listitem.active list hd con list info hd con list info toph hd ...
微信小程式實現側滑
先上效果圖 滑動之前 滑動之後 覺得效果圖不錯的朋友請繼續往下看 先上一段html 德國nestl 雀巢beba貝巴適度水解奶粉3段 10個月以上 800g 刪除下面是css touch item content item img item title del touch move active c...
側滑選單（一） 帶縮放動畫
建立自定義控制項 public class draglayout extends framelayout public draglayout context context,attributeset attrs public draglayout context context,attributes...