一、效果圖

講什么都不如直接上效果圖好，所以我們先來(lái)看下實(shí)現(xiàn)效果如何。

通過(guò)滑動(dòng)屏幕，或者點(diǎn)擊左上角的圖標(biāo)按鈕，都能實(shí)現(xiàn)側(cè)邊欄的劃出效果。

二、原理解析

1.先實(shí)現(xiàn)側(cè)邊欄的內(nèi)容，讓側(cè)邊欄的內(nèi)容居左，然后將側(cè)邊欄的內(nèi)容置于屏幕的最底部。

2.接著實(shí)現(xiàn)主頁(yè)的內(nèi)容，并且讓主頁(yè)的內(nèi)容默認(rèn)是覆蓋在側(cè)邊欄的內(nèi)容上面。

3.然后，實(shí)現(xiàn)手指滑動(dòng)屏幕的時(shí)候，主頁(yè)的內(nèi)容，向左滑動(dòng)一定的寬度，讓側(cè)邊欄的內(nèi)容顯示出來(lái)，而滑動(dòng)的效果是通過(guò) css 的 transition 來(lái)實(shí)現(xiàn)的。

三、源碼

由于實(shí)現(xiàn)過(guò)程的時(shí)，我對(duì)代碼作了比較詳細(xì)的注釋?zhuān)羞@里就不廢話，直接上代碼。

slide.wxml

<view class="page">  <!-- 側(cè)邊欄內(nèi)容 -->  <view class="page-slidebar">    <view class="page-content">      <view class="wc">        <text>首頁(yè)</text>      </view>      <view class="wc">        <text>導(dǎo)航一</text>      </view>      <view class="wc">        <text>導(dǎo)航二</text>      </view>      <view class="wc">        <text>導(dǎo)航三</text>      </view>    </view>  </view>    <!-- 主頁(yè)內(nèi)容 -->   <!-- （open ? 'c-state' : ''）三元運(yùn)算符： -->  <!-- 1.默認(rèn)情況下 open 為 false -->  <!-- 2.當(dāng)點(diǎn)擊左上角圖標(biāo)的時(shí)候或者屏幕向左滑動(dòng)，open 變化 true -->  <!-- 3.當(dāng) open 為 true 時(shí)，會(huì)加上類(lèi)名為 c-state 和 cover 的 css 樣式 -->   <!-- bindtouchstart、 bindtouchmove、bindtouchend -->  <!-- 當(dāng)手指觸摸屏幕并滑動(dòng)時(shí)，所觸發(fā)的三個(gè)函數(shù) -->  <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">    <image bindtap="tap_ch" src="../../images/btn.png"></image>    <view class='content'>       <text>為了幫助開(kāi)發(fā)者簡(jiǎn)單和高效地開(kāi)發(fā)和調(diào)試微信小程序，我們?cè)谠械墓娞?hào)網(wǎng)頁(yè)調(diào)試工具的基礎(chǔ)上，推出了全新的 微信開(kāi)發(fā)者工具，集成了公眾號(hào)網(wǎng)頁(yè)調(diào)試和小程序調(diào)試兩種開(kāi)發(fā)模式。 使用公眾號(hào)網(wǎng)頁(yè)調(diào)試，開(kāi)發(fā)者可以調(diào)試微信網(wǎng)頁(yè)授權(quán)和微信JS-SDK 詳情使用小程序調(diào)試，開(kāi)發(fā)者可以完成小程序的 API 和頁(yè)面的開(kāi)發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。為了更好的開(kāi)發(fā)體驗(yàn)，我們從視覺(jué)、交互、性能等方面對(duì)開(kāi)發(fā)者工具進(jìn)行升級(jí)，推出了 1.0.0 版本。</text>      <button>按鈕</button>    </view>  </view></view>