問(wèn)題描述 

在許多用戶(hù)體驗(yàn)效果較好的微信小程序中，用戶(hù)通過(guò)左右滑動(dòng)界面也能實(shí)現(xiàn)頁(yè)面的切換，方便了用戶(hù)使用，那它們是如何實(shí)現(xiàn)的呢？

解決方案 

圖 1   標(biāo)簽頁(yè)切換

在圖1中，頂部的 3 個(gè)標(biāo)簽頁(yè)標(biāo)題用 0 、 1 、 2 來(lái)表示，當(dāng)前顯示為標(biāo)簽頁(yè) 0 。當(dāng)用戶(hù)向左滑動(dòng)頁(yè)面時(shí)，標(biāo)簽頁(yè) 0 就會(huì)被劃到左邊的不可見(jiàn)區(qū)域，而標(biāo)簽頁(yè) 1 被劃入可見(jiàn)區(qū)域。如果用戶(hù)在向右滑動(dòng)頁(yè)面，則標(biāo)簽頁(yè) 1 被滑動(dòng)到右邊的不可見(jiàn)區(qū)域，標(biāo)簽頁(yè) 0 被劃入可見(jiàn)區(qū)域。

問(wèn)題解決

S wiper 組件是滑塊視圖容器，經(jīng)常用于實(shí)現(xiàn)輪播圖，現(xiàn)在我們將他用于實(shí)現(xiàn)標(biāo)簽頁(yè)的切換。代碼如下所示：

在上述代碼中，<swiper>標(biāo)簽是外層容器，里面有 3 個(gè) <swiper-item> 標(biāo)簽，表示當(dāng)前一共有 3 項(xiàng)，在初始狀態(tài)下只顯示第 1 項(xiàng)，向左滑動(dòng)顯示第 2 項(xiàng)，再向右滑動(dòng)可以返回第 1 項(xiàng)。

微信小程序并沒(méi)有嚴(yán)格規(guī)定<swiper-item>標(biāo)簽內(nèi)可以嵌套哪些組件，如果放入 image 組件，就實(shí)現(xiàn)了輪播圖效果；如果放入一塊頁(yè)面內(nèi)容，就實(shí)現(xiàn)了標(biāo)簽頁(yè)切換的效果了。

I nclude 代碼引用

在wxml文件中可以使用 <include> 標(biāo)簽引用其他文件中的代碼，相當(dāng)于把引用的代碼復(fù)制到 <include> 標(biāo)簽的位置。 <include> 標(biāo)簽的用途主要有兩點(diǎn)：

當(dāng)一個(gè)wxml頁(yè)面中的代碼過(guò)多時(shí)，會(huì)給代碼的維護(hù)帶來(lái)麻煩，有時(shí)為了找到某一處代碼可能翻閱幾百行。而利用 <include> 將代碼拆分到多個(gè)文件中，這樣就可以方便的查找代碼。

當(dāng)多個(gè)wxml頁(yè)面中有相同的部分時(shí)，可以將這些公共的部分抽取出來(lái)，保存到一個(gè)單獨(dú)的 wxml 文件中，然后在用到的地方通過(guò) <include> 引入。這樣可以減少重復(fù)的代碼，并且修改時(shí)只需要修改一次。

下面演示<include>標(biāo)簽的使用：

結(jié)語(yǔ) 

在調(diào)試代碼的過(guò)程中會(huì)遇上很多問(wèn)題，有可能一個(gè)錯(cuò)誤你調(diào)試了大半天還是沒(méi)能解決，這個(gè)時(shí)候我們要做的就是暫時(shí)放下它，等再過(guò)一會(huì)再來(lái)仔細(xì)的分析錯(cuò)誤原因和代碼邏輯。