小程序原生實(shí)現(xiàn)左滑抽屜菜單

第小程序原生實(shí)現(xiàn)左滑抽屜菜單varpageX=(e.touches[0]||e.changedTouches[0]).pageX;

varoffset=pageX-startmark;

vardrawerComp=ins.selectComponent('.drawer');

vardrawerWidth=drawerComp.getDataset().drawerwidth;

if(offset0status==0){

setCompTransX(drawerComp,Math.min(drawerWidth,offset))

}elseif(offset0status==1){

setCompTransX(drawerComp,Math.max(0,offset))

functiontouchEnd(e,ins){

varpageX=(e.touches[0]||e.changedTouches[0]).pageX;

varoffset=pageX-startmark;

vardrawerComp=ins.selectComponent('.drawer');

vardrawerWidth=drawerComp.getDataset().drawerwidth;

if(offset0status==0){

if(offsetdrawerWidth*JUDGEPOINT){

setCompTransX(drawerComp,0);

}else{

setCompTransX(drawerComp,drawerWidth);

status=1;

}elseif(offset0){

setCompTransX(drawerComp,0);

status=0;

functionsetCompTransX(comp,x){

comp.setStyle({

transform:'translateX('+x+'px)',

module.exports={

touchstart:touchStart,

touchmove:touchMove,

touchend:touchEnd

}

遮罩層

點(diǎn)擊文首或文末鏈接在小程序開發(fā)工具中查看完整代碼。

遮罩層只需要在菜單和主容器之間增加一個view即可：

view/view

viewdata-maxopacity="0.6"/view

viewdata-drawerwidth="150"/view

樣式中很重要的是這個pointer-events屬性，設(shè)置為none之后點(diǎn)擊動作會穿透這個view達(dá)到下層。因?yàn)檎谡謱硬幌癯閷鲜翘幵诋嬅嬉酝獾?，它雖然透明度為0，但實(shí)際上一直覆蓋在.main上方，如果不加這個屬性，所有對.main的點(diǎn)擊操作都會點(diǎn)到.mask上面，那不管是滑動還是其他按鈕都無效了。

.mask{

height:100vh;

width:100%;

position:fixed;

transition:opacity0.4sease;

opacity:0;

pointer-events:none;

background-color:#548CA8;

wxs腳本也基本完全一致，只需要以相似的方法獲取到.mask的實(shí)例以及dataset中的透明度參數(shù)，并在設(shè)置位移屬性的同時設(shè)置遮罩層的透明度屬性即可。

functionsetDrawer(x){

setCompTransX(drawerComp,x);

maskComp.setStyle({

opacity:x/drawerWidth*maskOpacity,

方案B

點(diǎn)擊文首或文末鏈接在小程序開發(fā)工具中查看完整代碼。

方案B與方案A的區(qū)別主要在于滑動時是主界面向右移動露出下層的菜單，其余各部分實(shí)現(xiàn)并無不同。這里只貼出主要差異的部分。

因?yàn)橐苿拥氖?main元素，因此把寬度配置數(shù)據(jù)放到了該元素的標(biāo)簽中，這樣可以少獲取一個組件實(shí)例。

view/view

view

data-drawerwidth="150"

bindtouchstart="{{drawer.touchstart}}"

bindtouchmove="{{drawer.touchmove}}"

bindtouchend="{{drawer.touchend}}"

/view

transition動畫屬性也放在.main中，.drawer的偏移不需要了。

.main{

height:100vh;

width:100%;

position:absolute;

transition:transform0.4sease;

.drawer{

height:100vh;

width:150px;

position:absolute;

wxs腳本中除了獲取的組件不同外，連設(shè)置位移都不需要改。

functiontouchMove(e,ins){

varpageX=(e.touches[0]||e.changedTouches[0]).pageX;

varoffset=pageX-startmark;

varmainComp=ins.selectComponent('.main');

vardrawerWidth=mainComp.getDataset().drawerwidth;

if(offset0status==0){

setCompTransX(mainComp,Math.min(drawerWidth,offset))

}elseif(offset0status==1){

setCompTransX(mainComp,Math.max(0,offset))

為什么要使用WXS

小程序在很多地方與web開發(fā)很像，但底層存在一些區(qū)別。網(wǎng)頁中，渲染和腳本執(zhí)行在同一個線程中執(zhí)行（因此執(zhí)行腳本可能會導(dǎo)致頁面整個卡死）；小程序在不同的線程中分別運(yùn)行邏輯層（JS腳本）和渲染層（WXML和WXSS），線程間經(jīng)由客戶端（Native）進(jìn)行通信。

因此，如果使用JS腳本響應(yīng)事件，每次觸發(fā)touchmove都會產(chǎn)生兩次進(jìn)程間通信（下圖左所示），通信開銷較大；同時“setData渲染也會阻塞其它腳本執(zhí)行”（文檔這么說的，我也不知道為什么）。由于一次手勢會觸發(fā)巨量的touchmove事件，上述原因會造成動畫的卡頓。

而WXS函數(shù)運(yùn)行在視圖層，不存在上述問題（下圖右所示）。

結(jié)語參考資料

以上就是原生小程序的幾種抽屜菜單實(shí)現(xiàn)方法，希望對你有所幫助；對于文中存在的疏漏歡迎討論指正。

點(diǎn)擊鏈接可以在