腾讯体育等体育类小程序系统开发案例

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一下我们的 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 页面


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
SaaS
上/下篇
  • 微信小程序仿携程系统开发

  • 餐饮外卖小程序开发的必要性

换一换相关推荐
精选内容
热点精选