世界杯来了！小程序赛事操做来一波~

前言

NBA总决赛结束还没一周，立刻世界杯就如期而至。你们在熬夜看球，而我关在小黑屋默默码字（可怜脸）。在体验到小程序的方便快捷省内存以后，前段时间的“骑勇大战”果断用了小程序观看。因为体验不错，又正在学习小程序知识，立刻就想动手实践学习一下“腾讯体育”小程序的制做。到目前为止，只想说一句“选择是好的，过程是一言难尽的”，虽然还没所有完成，但也遇到很多问题，但愿此分享能够给你带来帮助（源码）。

效果图

（干巴巴的开讲，还不如先来波动图）

问题及解决方案

一、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的高度逐渐调整到屏幕底部的高度，简直不要太粗暴，缺点是在不一样屏幕尺寸设备上查看，效果不一。若是有大佬可提供较好解决方案，恳请指教。

二、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]
    })
  }
复制代码

若是大佬们有解决方案欢迎交流讨论。详细代码查看可点击这里。

三、选项卡

天啦噜！你连选项卡都要说？（笑哭）听我解释。

一般咱们使用的选项卡中的选项都是 2 到 4 个，若是不嫌麻烦，咱们只要将选项卡和其对应的内容逐个在.wxml中写出来就行了。可是，一旦选项变多，若逐个写出，那.wxml中的代码将跟“懒婆娘的裹脚布”似的。此时，使用wx:for来循环输出选项就很是有必要了。另外，若是每一个选项中的内容都是相似的就更好了，可经过选项卡的点击事件得到当前选项的id，根据id使用wx:if条件渲染来决定当前选项卡显示的数据。在这又要cue一下咱们的NBA赛事详情页，此页面中的球员榜这个swiper-item就包含了一个有 5 个选项的选项卡。

详细代码查看可点击这里。

四、自定义日历

为了更好的体验，体育赛事总要加入日历，方便用户查看赛事安排。若使用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 页面

结语

因为是第一次写项目，相关知识储备也还不够，从项目开始到如今，遇到的问题可不止这些，但解决问题的过程是辛苦也是富有乐趣的。目前这个项目也还有不少部分没有实现，但会持续更新，若是感兴趣欢迎交流讨论。以后将全面学习mpvue和wepy小程序框架，若使用框架写这个项目相信会简单一些，有机会能够写一个mpvue版。

个人项目在这里哦。