NBA總決賽結(jié)束還沒一周，馬上世界杯就如期而至。大家在熬夜看球，而我關(guān)在小黑屋默默碼字（可憐臉）。在體驗(yàn)到小程序的 方便快捷省內(nèi)存 之后，前段時(shí)間的“騎勇大戰(zhàn)”果斷用了小程序觀看。由于體驗(yàn)不錯(cuò)，又正在學(xué)習(xí)小程序知識(shí)，馬上就想動(dòng)手實(shí)踐學(xué)習(xí)一下“騰訊體育”小程序的制作。到目前為止，只想說一句“選擇是好的，過程是一言難盡的”，雖然還沒全部完成，但也遇到不少問題，希望此分享可以給你帶來幫助。

效果圖

（干巴巴的開講，還不如先來波動(dòng)圖）

問題及解決方案

1、scroll-view組件

讓我們先來看看開發(fā)文檔

• scroll-x

在此項(xiàng)目中，首頁——世界杯的頭部是一個(gè)橫向滑動(dòng)的 scroll-view 組件，在設(shè)置了 scroll-x 屬性后，并未達(dá)到預(yù)期效果，scroll-view中的每個(gè)部分還是自成一行。在一番簡單搜索后得出，設(shè)置 white-space: nowrap; 樣式就可使其在同一行。

• scroll-y

NBA賽事詳情頁中有5個(gè)sroll-view，雖然內(nèi)容有點(diǎn)少，但還是看得出有scroll的效果的。

同樣的，在制作豎向滾動(dòng)效果時(shí)，需要設(shè)置 sroll-y 屬性，在官方的文檔中也特別說明了

使用豎向滾動(dòng)時(shí)，需要給 scroll-view 一個(gè)固定高度，通過 WXSS 設(shè)置 height。

那么問題來了，在 scroll-view 并非占滿全屏的情況下，如何確定其高度呢？

首先想到，把包含選項(xiàng)卡和 scroll-view 的大盒子固定寬度后，在遵循文檔流的情況下，將 scroll-view 高度設(shè)置為 100%不就好了嗎？但是，在如此一番設(shè)置之后， scroll-view 的高度變成了大盒子的高度？？？（黑人問號(hào)臉），最重要的是 scroll-view 中的內(nèi)容不能完全顯示，這就頭疼了。

隨后馬上想到可以使用彈性布局，固定其選項(xiàng)卡的高度，下方的 scroll-view 設(shè)置 flex: 1，這難道還解決不了嗎？是的，bug永相隨。下圖可以看到，選項(xiàng)卡的高度明顯變小，要是scroll-view的內(nèi)容再多一點(diǎn)，選項(xiàng)卡就被擠到窒息了。

最后無奈只好將scroll-view的高度逐漸調(diào)整到屏幕底部的高度，簡直不要太粗暴，缺點(diǎn)是在不同屏幕尺寸設(shè)備上查看，效果不一。如果有大佬可提供較好解決方案，懇請(qǐng)指教。

2、swiper組件

開發(fā)文檔是好朋友，讓我們?cè)賮砜纯础?/a>

swiper 組件在小程序中非常常見，它可在有限的區(qū)域展示更多內(nèi)容，還能增加頁面的視覺動(dòng)態(tài)效果，總之就是好。（但，好東西也是有槽點(diǎn)的啦）

1） 從上面動(dòng)圖可看出，NBA賽事詳情頁中也使用到了 swiper 組件，并且與頭部的導(dǎo)航進(jìn)行了綁定，滑動(dòng) swiper 可改變導(dǎo)航欄的狀態(tài)，點(diǎn)擊導(dǎo)航欄選項(xiàng)可切換 swiper-item 。這個(gè)實(shí)現(xiàn)較為簡單，步驟如下：

• 在 data 中添加一個(gè)表示下標(biāo)的變量 curIndex ；
• 將此變量綁定到導(dǎo)航欄各個(gè)選項(xiàng)，同時(shí)使用一個(gè)三目運(yùn)算符進(jìn)行 wx:if 條件渲染，若 curIndex 等于當(dāng)前選項(xiàng)的下標(biāo)，則在其底部添加一個(gè)偽元素表示選中；
• 將 curIndex 綁定到 swiper 的 current 屬性中，通過選項(xiàng)卡的 bindtap 事件和 swiper的 bindchange 事件實(shí)時(shí)切換 swiper-ite