騰訊體育等體育類小程序系統(tǒng)開(kāi)發(fā)案例
2018年世界杯賽事正在火熱進(jìn)行中,很多體育類的小程序也在借此熱點(diǎn)來(lái)引流,這里以騰訊體育+小程序?yàn)槔?,為大家介紹騰訊體育等體育類小程序系統(tǒng)開(kāi)發(fā)案例。
效果圖
問(wèn)題及解決方案
1、scroll-view組件
讓我們先來(lái)看看開(kāi)發(fā)文檔
- scroll-x
在此項(xiàng)目中,首頁(yè)——世界杯的頭部是一個(gè)橫向滑動(dòng)的 scroll-view 組件,在設(shè)置了 scroll-x 屬性后,并未達(dá)到預(yù)期效果,scroll-view中的每個(gè)部分還是自成一行。在一番簡(jiǎn)單搜索后得出,設(shè)置 white-space: nowrap; 樣式就可使其在同一行。
- scroll-y
NBA賽事詳情頁(yè)中有5個(gè)sroll-view,雖然內(nèi)容有點(diǎn)少,但還是看得出有scroll的效果的。
同樣的,在制作豎向滾動(dòng)效果時(shí),需要設(shè)置 sroll-y 屬性,在官方的文檔中也特別說(shuō)明了
使用豎向滾動(dòng)時(shí),需要給 scroll-view 一個(gè)固定高度,通過(guò) WXSS 設(shè)置 height。
那么問(wèn)題來(lái)了,在 scroll-view 并非占滿全屏的情況下,如何確定其高度呢?
首先想到,把包含選項(xiàng)卡和 scroll-view 的大盒子固定寬度后,在遵循文檔流的情況下,將 scroll-view 高度設(shè)置為 100%不就好了嗎?但是,在如此一番設(shè)置之后, scroll-view 的高度變成了大盒子的高度???(黑人問(wèn)號(hào)臉),最重要的是 scroll-view 中的內(nèi)容不能完全顯示,這就頭疼了。
隨后馬上想到可以使用彈性布局,固定其選項(xiàng)卡的高度,下方的 scroll-view 設(shè)置 flex: 1,這難道還解決不了嗎?是的,bug永相隨。下圖可以看到,選項(xiàng)卡的高度明顯變小,要是scroll-view的內(nèi)容再多一點(diǎn),選項(xiàng)卡就被擠到窒息了。
最后無(wú)奈只好將scroll-view的高度逐漸調(diào)整到屏幕底部的高度,簡(jiǎn)直不要太粗暴,缺點(diǎn)是在不同屏幕尺寸設(shè)備上查看,效果不一。如果有大佬可提供較好解決方案,懇請(qǐng)指教。
2、swiper組件
開(kāi)發(fā)文檔是好朋友,讓我們?cè)賮?lái)看看。
swiper 組件在小程序中非常常見(jiàn),它可在有限的區(qū)域展示更多內(nèi)容,還能增加頁(yè)面的視覺(jué)動(dòng)態(tài)效果,總之就是好。(但,好東西也是有槽點(diǎn)的啦)
1) 從上面動(dòng)圖可看出,NBA賽事詳情頁(yè)中也使用到了 swiper 組件,并且與頭部的導(dǎo)航進(jìn)行了綁定,滑動(dòng) swiper 可改變導(dǎo)航欄的狀態(tài),點(diǎn)擊導(dǎo)航欄選項(xiàng)可切換 swiper-item 。這個(gè)實(shí)現(xiàn)較為簡(jiǎ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 屬性中,通過(guò)選項(xiàng)卡的 bindtap 事件和 swiper的 bindchange 事件實(shí)時(shí)切換 swiper-item 。
話不多說(shuō),貼上代碼:
//nbaMatches.wxml <view class="info_hd"> <view class="headerMenu {{curIndex===index?'on':''}}" wx:for="{{nbaMenu}}" data-index="{{index}}" bindtap="switchSort"> <view class="nbaSort">{{item.nbaSort}}</view> </view> </view> <view class="info_bd"> <swiper current="{{curIndex}}" bindchange="bindswiper"> ... </swiper> </view>
//nbaMatches.js bindswiper(e) { this.setData({ curIndex: e.detail.current }) }, switchSort(e) { console.log(e.currentTarget.dataset.index); this.setData({ curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index: 0 }) }
2) 此項(xiàng)目的“熱門(mén)”頁(yè)也使用了一個(gè) swiper 組件,相比普通 swiper 的使用,這個(gè)更為復(fù)雜。此處的 swiper 不再是與有限個(gè)的選項(xiàng)進(jìn)行交互,而是與無(wú)限個(gè)的日期進(jìn)行交互。難道一年365天就要365個(gè) swiper-item ? 嚇得老夫虎軀一震。
經(jīng)過(guò)一場(chǎng)“豬腦子”風(fēng)暴后,還是沒(méi)有想出完美的解決方案,只好設(shè)置有限個(gè) swiper-item 來(lái)初步實(shí)現(xiàn)所需效果。
還是貼代碼吧!
//swiper的bindchange事件 changeMatch(e) { const current = e.detail.current; //獲取當(dāng)前位置 const befInd = this.data.swiperCurIndex; //獲取滑動(dòng)前的位置 const index = current - befInd; if (index <= -1) { //判斷左滑右滑 this.preDay(); //日期切換至前一天 } else if (index >= 1) { this.nextDay(); //日期切換至后一天 } else { return } }
// nextDay() 方法類似 preDay() { let day = this.data.day; let month = this.data.month; let week= this.data.week; let i = this.data.i; if (i<=0) { //周一至周日的循環(huán)切換 i = 6; }else { i--; } if(day<=1) { //日期本月第一天時(shí),將日期切換至上月最后一天 month--; day = this.data.daysCountArr[month-1]; }else { day--; //否則切換至前一天 } this.setData({ swiperCurIndex: this.data.swiperCurIndex-1, month, day, i, week: this.data.weekArr[i], curDate: month+'月'+day+'日'+' '+this.data.weekArr[i] }) }
3、選項(xiàng)卡
天啦嚕!你連選項(xiàng)卡都要說(shuō)?(笑哭)聽(tīng)我解釋。
通常我們使用的選項(xiàng)卡中的選項(xiàng)都是 2 到 4 個(gè),如果不嫌麻煩,我們只要將選項(xiàng)卡和其對(duì)應(yīng)的內(nèi)容逐個(gè)在 .wxml 中寫(xiě)出來(lái)就好了。但是,一旦選項(xiàng)變多,若逐個(gè)寫(xiě)出,那 .wxml 中的代碼將跟“懶婆娘的裹腳布”似的。此時(shí),使用 wx:for 來(lái)循環(huán)輸出選項(xiàng)就非常有必要了。另外,如果每個(gè)選項(xiàng)中的內(nèi)容都是類似的就更好了,可通過(guò)選項(xiàng)卡的點(diǎn)擊事件獲得當(dāng)前選項(xiàng)的 id ,根據(jù) id 使用 wx:if 條件渲染來(lái)決定當(dāng)前選項(xiàng)卡顯示的數(shù)據(jù)。在這又要cue一下我們的 NBA賽事詳情頁(yè) ,此頁(yè)面中的球員榜這個(gè) swiper-item 就包含了一個(gè)有 5 個(gè)選項(xiàng)的選項(xiàng)卡。
4、自定義日歷
為了更好的體驗(yàn),體育賽事總要加入日歷,方便用戶查看賽事安排。若使用 picker 組件,用戶體驗(yàn)可能差強(qiáng)人意,那么如何自定義一個(gè)日歷呢?在參照了各路大神的方法后得出以下分析:
- 可左右切換月份并顯示當(dāng)月日歷。騰訊體育官方小程序的日歷可左右滑動(dòng)切換,與“熱門(mén)”頁(yè)類似。由于還沒(méi)有解決方案,在這里沒(méi)有使用 swiper 組件。日歷主體中的每月日期是一個(gè)二維數(shù)組,每月的周數(shù)則為數(shù)組的length,因此wxml中的日期輸出需要使用兩重 wx:for 。部分代碼如下:
<view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week" wx:key="{{index}}" style="{{index==0?'justify-content: flex-end;':''}}"> <view wx:for="{{week}}" data-date="{{item}}" class="weekday_label {{item.value==selectedDate?'active_label':''}}" bindtap="selectDate"> <view class="date"> <text>{{item.date}}</text> </view> <view class="gameNumBox"> <text class="gameNum">{{item.gameNum}}</text> <text>場(chǎng)比賽</text> </view> </view> </view>
- 默認(rèn)高亮顯示當(dāng)天日期,點(diǎn)擊具體日期高亮顯示。這個(gè)實(shí)現(xiàn)起來(lái)較為簡(jiǎn)單,只需得到通過(guò)點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊日期,在 .wxml 中使用三目運(yùn)算符判斷獲取日期與數(shù)據(jù)中的日期是否相同,從而達(dá)到高亮顯示的效果。
-
返回今天。點(diǎn)擊“返回今天”可回退至“熱門(mén)”頁(yè)并顯示當(dāng)天的賽事。使用小程序自帶 API —— wx.navigateBack(OBJECT) 即可返回上一頁(yè)面,以下為文檔截圖:
wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁(yè)面,只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁(yè)面