問題描述
在(zai)許多用戶體驗效果較(jiao)好的微信小程序(xu)中，用戶通過左右滑動(dong)界(jie)面也能實(shi)現頁面的切換，方便了用戶使用，那它們是如(ru)何實(shi)現的呢？
解(jie)決方案
圖 1 標簽頁切換
在(zai)圖(tu)1中，頂部的 3 個(ge)標(biao)(biao)簽(qian)(qian)頁(ye)標(biao)(biao)題用 0 、 1 、 2 來表(biao)示，當前顯示為標(biao)(biao)簽(qian)(qian)頁(ye) 0 。當用戶向左滑動(dong)頁(ye)面(mian)(mian)時，標(biao)(biao)簽(qian)(qian)頁(ye) 0 就(jiu)會被(bei)(bei)(bei)劃(hua)(hua)到(dao)左邊(bian)的不可見(jian)(jian)區(qu)(qu)域(yu)(yu)，而標(biao)(biao)簽(qian)(qian)頁(ye) 1 被(bei)(bei)(bei)劃(hua)(hua)入可見(jian)(jian)區(qu)(qu)域(yu)(yu)。如果(guo)用戶在(zai)向右滑動(dong)頁(ye)面(mian)(mian)，則標(biao)(biao)簽(qian)(qian)頁(ye) 1 被(bei)(bei)(bei)滑動(dong)到(dao)右邊(bian)的不可見(jian)(jian)區(qu)(qu)域(yu)(yu)，標(biao)(biao)簽(qian)(qian)頁(ye) 0 被(bei)(bei)(bei)劃(hua)(hua)入可見(jian)(jian)區(qu)(qu)域(yu)(yu)。
問題解決
S wiper 組件(jian)是滑塊(kuai)視(shi)圖容器(qi)，經(jing)常用(yong)于實現輪(lun)播圖，現在(zai)我們將他(ta)用(yong)于實現標簽(qian)頁的切換。代碼如下所(suo)示：
<swiper>
<swiper-item style= ” background:#aaa ” >0</swiper-item>
<swiper-item style= ” background:#bbb ” >1</swiper-item>
<swiper-item style= ” background:#ccc ” >2</swiper-item>
</swiper>
在上(shang)述代碼中，<swiper>標簽是(shi)外層容器(qi)，里面(mian)有 3 個 <swiper-item> 標簽，表示(shi)當前(qian)一共有 3 項，在初始(shi)狀態下只顯(xian)示(shi)第(di) 1 項，向左(zuo)滑動顯(xian)示(shi)第(di) 2 ;項，再(zai)向右(you)滑動可以返回第(di) 1 項。
微信(xin)小(xiao)程(cheng)序并沒有嚴格規定<swiper-item>標簽內可以嵌(qian)套哪些組件(jian)，如果(guo)(guo)放(fang)入 image 組件(jian)，就實現了(le)輪播圖效(xiao)果(guo)(guo)；如果(guo)(guo)放(fang)入一塊頁面內容，就實現了(le)標簽頁切換(huan)的效(xiao)果(guo)(guo)了(le)。
I nclude 代碼引(yin)用
在wxml文件(jian)中可以(yi)使(shi)用(yong) <include> 標簽(qian)引用(yong)其他文件(jian)中的(de)(de)代(dai)碼，相當于把引用(yong)的(de)(de)代(dai)碼復制到(dao) <include> 標簽(qian)的(de)(de)位置。 <include> 標簽(qian)的(de)(de)用(yong)途主(zhu)要有兩點：
當一(yi)個(ge)wxml頁面中的代(dai)碼過(guo)多(duo)時(shi)，會給代(dai)碼的維護帶來麻煩，有時(shi)為了找到某(mou)一(yi)處代(dai)碼可能翻閱(yue)幾百(bai)行(xing)。而(er)利用 ;<include> 將代(dai)碼拆(chai)分到多(duo)個(ge)文件中，這樣就可以(yi)方便的查找代(dai)碼。
當多個wxml頁(ye)面中(zhong)(zhong)有相(xiang)同(tong)的(de)部(bu)(bu)分(fen)時，可(ke)以(yi)將這些公共的(de)部(bu)(bu)分(fen)抽取(qu)出來，保(bao)存到一(yi)個單獨的(de) wxml 文件中(zhong)(zhong)，然后在用到的(de)地方通過 <include> 引入(ru)。這樣(yang)可(ke)以(yi)減少重(zhong)復的(de)代碼，并且修(xiu)改(gai)時只(zhi)需要修(xiu)改(gai)一(yi)次(ci)。
下面演示<include>標(biao)簽的使用：
<include src= ” index.wxml ” /> // 引(yin)入(ru) index.wxml 文件
<view>body</view>
<include scr= ” logs.wxml ” /> // 引入 logs.wxml 文件
結語(yu)
在(zai)調試(shi)代(dai)碼的(de)過程中(zhong)會遇上很(hen)多問題，有可能一(yi)個錯誤你調試(shi)了大半天還是(shi)沒能解決，這個時候我們要做(zuo)的(de)就(jiu)是(shi)暫時放下它，等再(zai)過一(yi)會再(zai)來仔細(xi)的(de)分析錯誤原因(yin)和(he)代(dai)碼邏輯(ji)。
