2018年天下杯赛事正在火热举行中，，，许多体育类的小程序也在借此热门来引流，，，这里以腾讯体育+小程序为例，，，为各人介绍腾讯体育等体育类小程序系统开发案例。。。

效果图

问题及解决方案

1、scroll-view组件

让我们先来看看开发文档

• scroll-x

在此项目中，，，首页——天下杯的头部是一个横向滑动的 scroll-view 组件，，，在设置了 scroll-x 属性后，，，并未抵达预期效果，，，scroll-view中的每个部分照旧自成一行。。。在一番简朴搜索后得出，，，设置 white-space: nowrap; 样式就可使其在统一行。。。

• scroll-y

NBA赛事详情页中有5个sroll-view，，，虽然内容有点少，，，但照旧看得出有scroll的效果的。。。

同样的，，，在制作竖向转动效果时，，，需要设置 sroll-y 属性，，，在官方的文档中也特殊说明晰

使用竖向转动时，，，需要给 scroll-view 一个牢靠高度，，，通过 WXSS 设置 height。。。

那么问题来了，，，在 scroll-view 并非占满全屏的情形下，，，怎样确定其高度呢？？

首先想到，，，把包括选项卡和 scroll-view 的大盒子牢靠宽度后，，，在遵照文档流的情形下，，，将 scroll-view 高度设置为 100%不就好了吗？？可是，，，在云云一番设置之后，，， scroll-view 的高度酿成了大盒子的高度？？？？？？（黑人问号脸），，，最主要的是 scroll-view 中的内容不可完全显示，，，这就头疼了。。。

随后马上想到可以使用弹性结构，，，牢靠其选项卡的高度，，，下方的 scroll-view 设置 flex: 1，，，这岂非还解决不了吗？？是的，，，bug永相随。。。下图可以看到，，，选项卡的高度显着变。。。，，要是scroll-view的内容再多一点，，，选项卡就被挤到窒息了。。。

最后无奈只好将scroll-view的高度逐渐调解到屏幕底部的高度，，，简直不要太粗暴，，，弱点是在差别屏幕尺寸装备上审查，，，效果纷歧。。。若是有大佬可提供较好解决方案，，，恳请指教。。。

2、swiper组件

开发文档是好朋侪，，，让我们再来看看。。。

swiper 组件在小程序中非经常见，，，它可在有限的区域展示更多内容，，，还能增添页面的视觉动态效果，，，总之就是好。。。（但，，，好工具也是有槽点的啦）

1） 从上面动图可看出，，，NBA赛事详情页中也使用到了 swiper 组件，，，并且与头部的导航举行了绑定，，，滑动 swiper 可改变导航栏的状态，，，点击导航栏选项可切换 swiper-item 。。。这个实现较为简朴，，，方法如下：

• 在 data 中添加一个体现下标的变量 curIndex ；；；；；
• 将此变量绑定到导航栏各个选项，，，同时使用一个三目运算符举行 wx:if 条件渲染，，，若 curIndex 即是目今选项的下标，，，则在其底部添加一个伪元素体现选中；；；；；
• 将 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 的使用，，，这个更为重大。。。此处的 swiper 不再是与有限个的选项举行交互，，，而是与无限个的日期举行交互。。。岂非一年365天就要365个 swiper-item ？？ 吓得老汉虎躯一震。。。

经由一场“猪脑子”风暴后，，，照旧没有想出完善的解决方案，，，只好设置有限个 swiper-item 来起源实现所需效果。。。

照旧贴代码吧！

//swiper的bindchange事务
changeMatch(e) {
    const current = e.detail.current;   //获取目今位置
    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) {  //周一至周日的循环切换
      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 个，，，若是不嫌贫困，，，我们只要将选项卡和其对应的内容逐个在 .wxml 中写出来就好了。。。可是，，，一旦选项变多，，，若逐个写出，，，那 .wxml 中的代码将跟“懒婆娘的裹脚布”似的。。。此时，，，使用 wx:for 来循环输出选项就很是有须要了。。。另外，，，若是每个选项中的内容都是类似的就更好了，，，可通过选项卡的点击事务获适目今选项的 id ，，，凭证 id 使用 wx:if 条件渲染来决议目今选项卡显示的数据。。。在这又要cue一下pp电子 NBA赛事详情页 ，，，此页面中的球员榜这个 swiper-item 就包括了一个有 5 个选项的选项卡。。。

4、自界说日历

为了更好的体验，，，体育赛事总要加入日历，，，利便用户审查赛事安排。。。若使用 picker 组件，，，用户体验可能差强人意，，，那么怎样自界说一个日历呢？？在参照了各路大神的要领后得出以下剖析：

• 可左右切换月份并显示当月日历。。。腾讯体育官方小程序的日历可左右滑动切换，，，与“热门”页类似。。。由于还没有解决方案，，，在这里没有使用 swiper 组件。。。日历主体中的每月日期是一个二维数组，，，每月的周数则为数组的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>

• 默认高亮显示当天日期，，，点击详细日期高亮显示。。。这个实现起来较为简朴，，，只需获得通过点击事务获取目今点击日期，，，在 .wxml 中使用三目运算符判断获取日期与数据中的日期是否相同，，，从而抵达高亮显示的效果。。。
• 返回今天。。。点击“返回今天”可回退至“热门”页并显示当天的赛事。。。使用小程序自带 API —— wx.navigateBack(OBJECT) 即可返回上一页面，，，以下为文档截图：

   

  值得注重的是：

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，，，只能用 wx.switchTab 跳转到 tabbar 页面