騰訊體育等體育類小程序系統(tǒng)開發(fā)案例

2018年世界杯賽事正在火熱進(jìn)行中，很多體育類的小程序也在借此熱點來引流，這里以騰訊體育+小程序為例，為大家介紹騰訊體育等體育類小程序系統(tǒng)開發(fā)案例。

效果圖

問題及解決方案

1、scroll-view組件

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

• scroll-x

在此項目中，首頁——世界杯的頭部是一個橫向滑動的 scroll-view 組件，在設(shè)置了 scroll-x 屬性后，并未達(dá)到預(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)航進(jìn)行了綁定，滑動 swiper 可改變導(dǎo)航欄的狀態(tài)，點擊導(dǎo)航欄選項可切換 swiper-item 。這個實現(xiàn)較為簡單，步驟如下：

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

話不多說，貼上代碼：

//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） 此項目的“熱門”頁也使用了一個 swiper 組件，相比普通 swiper 的使用，這個更為復(fù)雜。此處的 swiper 不再是與有限個的選項進(jìn)行交互，而是與無限個的日期進(jìn)行交互。難道一年365天就要365個 swiper-item ？ 嚇得老夫虎軀一震。

經(jīng)過一場“豬腦子”風(fēng)暴后，還是沒有想出完美的解決方案，只好設(shè)置有限個 swiper-item 來初步實現(xiàn)所需效果。

還是貼代碼吧！

//swiper的bindchange事件
changeMatch(e) {
    const current = e.detail.current;   //獲取當(dāng)前位置
    const befInd = this.data.swiperCurIndex;  //獲取滑動前的位置
    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) {  //日期本月第一天時，將日期切換至上月最后一天
      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、選項卡

天啦嚕！你連選項卡都要說？（笑哭）聽我解釋。

通常我們使用的選項卡中的選項都是 2 到 4 個，如果不嫌麻煩，我們只要將選項卡和其對應(yīng)的內(nèi)容逐個在 .wxml 中寫出來就好了。但是，一旦選項變多，若逐個寫出，那 .wxml 中的代碼將跟“懶婆娘的裹腳布”似的。此時，使用 wx:for 來循環(huán)輸出選項就非常有必要了。另外，如果每個選項中的內(nèi)容都是類似的就更好了，可通過選項卡的點擊事件獲得當(dāng)前選項的 id ，根據(jù) id 使用 wx:if 條件渲染來決定當(dāng)前選項卡顯示的數(shù)據(jù)。在這又要cue一下我們的 NBA賽事詳情頁 ，此頁面中的球員榜這個 swiper-item 就包含了一個有 5 個選項的選項卡。

4、自定義日歷

為了更好的體驗，體育賽事總要加入日歷，方便用戶查看賽事安排。若使用 picker 組件，用戶體驗可能差強(qiáng)人意，那么如何自定義一個日歷呢？在參照了各路大神的方法后得出以下分析：

• 可左右切換月份并顯示當(dāng)月日歷。騰訊體育官方小程序的日歷可左右滑動切換，與“熱門”頁類似。由于還沒有解決方案，在這里沒有使用 swiper 組件。日歷主體中的每月日期是一個二維數(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>場比賽</text>
        </view> 
    </view>
</view>

• 默認(rèn)高亮顯示當(dāng)天日期，點擊具體日期高亮顯示。這個實現(xiàn)起來較為簡單，只需得到通過點擊事件獲取當(dāng)前點擊日期，在 .wxml 中使用三目運(yùn)算符判斷獲取日期與數(shù)據(jù)中的日期是否相同，從而達(dá)到高亮顯示的效果。
• 返回今天。點擊“返回今天”可回退至“熱門”頁并顯示當(dāng)天的賽事。使用小程序自帶 API —— wx.navigateBack(OBJECT) 即可返回上一頁面，以下為文檔截圖：

   

  值得注意的是：

wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁面，只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁面