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

效果圖

（干巴巴的開講，還不如先來波動圖）

問題及解決方案

1、scroll-view組件

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

• scroll-x

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

• scroll-y

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

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

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

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

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

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

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

2、swiper組件

開發(fā)文檔是好朋友，讓我們再來看看。

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

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

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