問題描述 

在許多用(yong)戶(hu)體(ti)驗效果較好的(de)微信小(xiao)程序中(zhong)，用(yong)戶(hu)通過左(zuo)右滑動界面也能實(shi)現頁面的(de)切換(huan)，方(fang)便了用(yong)戶(hu)使用(yong)，那(nei)它(ta)們(men)是如(ru)何(he)實(shi)現的(de)呢？

解決方案(an) 

圖 1   標簽(qian)頁切換(huan)

在(zai)圖1中(zhong)，頂(ding)部(bu)的(de) 3 個標(biao)簽(qian)(qian)頁(ye)標(biao)題用(yong) 0 、 1 、 2 來表示，當前顯(xian)示為(wei)標(biao)簽(qian)(qian)頁(ye) 0 。當用(yong)戶向(xiang)左滑(hua)動(dong)頁(ye)面(mian)時，標(biao)簽(qian)(qian)頁(ye) 0 就(jiu)會被劃(hua)到左邊的(de)不可(ke)見(jian)區域(yu)，而標(biao)簽(qian)(qian)頁(ye) 1 被劃(hua)入(ru)可(ke)見(jian)區域(yu)。如果用(yong)戶在(zai)向(xiang)右(you)滑(hua)動(dong)頁(ye)面(mian)，則(ze)標(biao)簽(qian)(qian)頁(ye) 1 被滑(hua)動(dong)到右(you)邊的(de)不可(ke)見(jian)區域(yu)，標(biao)簽(qian)(qian)頁(ye) 0 被劃(hua)入(ru)可(ke)見(jian)區域(yu)。

問題解決

S wiper 組件是滑塊視圖(tu)容器，經常用于(yu)實現(xian)輪播圖(tu)，現(xian)在我們(men)將他用于(yu)實現(xian)標簽頁(ye)的切(qie)換。代碼(ma)如下所示：

在(zai)(zai)上述代碼中，<swiper>標簽是外(wai)層容器，里面有 3 個 <swiper-item> 標簽，表示當前一(yi)共有&nbsp;3 項，在(zai)(zai)初始狀態下只(zhi)顯(xian)(xian)示第(di) 1 項，向左滑動(dong)顯(xian)(xian)示第(di) 2 項，再向右滑動(dong)可以返回第(di) 1 項。

微信小程(cheng)序并(bing)沒(mei)有嚴格規定<swiper-item>標簽內可以嵌套哪些(xie)組(zu)件，如(ru)果(guo)放入 image 組(zu)件，就實(shi)現了(le)(le)輪播圖(tu)效果(guo)；如(ru)果(guo)放入一塊頁(ye)面內容，就實(shi)現了(le)(le)標簽頁(ye)切換的效果(guo)了(le)(le)。

I nclude 代(dai)碼引用

在wxml文件中可以使用 <include> 標(biao)簽(qian)引用其(qi)他文件中的代碼(ma)，相當于把引用的代碼(ma)復(fu)制到 <include> 標(biao)簽(qian)的位置。 <include> 標(biao)簽(qian)的用途主要有兩點：

當一個(ge)wxml頁(ye)面中的代(dai)碼(ma)過多時，會(hui)給(gei)代(dai)碼(ma)的維護(hu)帶(dai)來麻煩，有時為(wei)了找到某(mou)一處(chu)代(dai)碼(ma)可能翻(fan)閱幾百行(xing)。而利用 <include> 將代(dai)碼(ma)拆分到多個(ge)文件中，這樣就可以方便的查找代(dai)碼(ma)。

當多個wxml頁(ye)面中有相同的部分時，可以(yi)將(jiang)這(zhe)些公(gong)共的部分抽取(qu)出來，保存到一個單獨的 wxml 文件中，然后在用到的地方通(tong)過 <include> 引入。這(zhe)樣可以(yi)減少重復的代碼，并且(qie)修(xiu)改時只需要修(xiu)改一次。

下面演(yan)示(shi)<include>標簽(qian)的使用：

結語 

在調試代(dai)碼的過程(cheng)中(zhong)會(hui)遇上(shang)很(hen)多問題(ti)，有可(ke)能(neng)一個(ge)錯誤你調試了大半天(tian)還(huan)是(shi)沒能(neng)解決(jue)，這個(ge)時候我們(men)要做(zuo)的就(jiu)是(shi)暫時放下(xia)它，等再過一會(hui)再來(lai)仔細的分析(xi)錯誤原因和代(dai)碼邏輯。