腾讯体育和其他体育小程序系统开发案例

2018年世界杯正如火如荼。许多体育运动小程序也在利用这个热点。这里以腾讯体育+ 小程序为例介绍腾讯体育和其他体育小程序系统开发案例。

效果图

问题和解决方案1，滚动视图组件

我们来看看开发文档

滚动-X

在这个项目中，——世界杯的头部是一个水平滑动滚动视图组件。设置scroll-x属性后，它无法达到预期的效果。滚动视图的每个部分仍然是一条线。在简单搜索之后，设置白色空间: nowrap;风格使它在同一条线上。

滚动-Y

NBA赛事详情页面上有5个滚动视图。虽然内容略少，但它仍然显示滚动的效果。

同样，在创建垂直滚动效果时，您需要设置sroll-y属性，该属性也在官方文档中指定。

使用垂直滚动时，需要为滚动视图指定固定高度，并通过WXSS设置高度。

所以问题是，如何在没有全屏的情况下确定滚动视图的高度？

首先，在固定包含标签的大框和滚动视图的宽度之后，在跟随文档流程时将滚动视图高度设置为100％是不好的。但是，在这样的设置之后，滚动视图的高度变成大盒子的高度？ （黑色问号脸），最重要的是滚动视图的内容无法完全显示，这是一个令人头疼的问题。

我立刻想到我可以使用弹性布局来固定标签的高度。下面的幻灯片: 1的滚动视图设置，这不能解决？是的，这些错误总会随之而来。如下图所示，标签的高度明显较小。如果滚动视图的内容多一点，则标签会被挤压成窒息。

最后，我别无选择，只能逐渐将滚动视图的高度调整到屏幕底部的高度。它不应该太粗糙。缺点是可以在不同屏幕尺寸的设备上查看。如果您有一个很大的解决方案来提供更好的解决方案，请告知。

2，swiper组件

开发文档是一个好朋友，让我们来看看。

swiper组件在小程序中非常常见，它可以在有限的区域内显示更多内容，并且还可以增加页面的视觉动态，简而言之，它是好的。 （然而，好的东西也有插入）

1）从上图中可以看出，Swiper组件也用于NBA赛事详情页面，并且必然会导致头部导航。 Swiper可以改变导航栏的状态。单击导航栏选项可在滑动项之间切换。这个实现比较简单，步骤如下：

添加一个表示数据下标的变量curIndex;将此变量绑定到导航栏选项，如果条件渲染，则使用三目操作符作为wx:如果curIndex等于当前选项的下标，请将其添加到底部。伪元素表示选择;将curIndex绑定到swiper的当前属性，并通过tab的binddap事件和swiper的bindchange事件实时切换swiper-item。

不多说，粘贴代码：

//nbaMatches.wxml{{item.nbaSort}} . //nnMatches.jsbindswiper(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不再与有限数量的选项交互，但具有无限数量的日期。它是365一年365天的swiper-item？害怕老人的身体。

经过“猪脑”风暴后，仍然没有拿出完美的解决方案，不得不设置有限数量的刷卡项目，以初步达到预期的效果。

仍粘贴代码！

/////////////////////索引＆lt;=＆gt;=1）{this.nextDay（）; //date切换到第二天} else {return}} //nextDay（）方法类似于preDay（）{let day=this.data.day; let Month=this.data.month; let week=this.data.week;让我=this.data.i; if（i <=0）＆gt; 3，tab

这是一天！你甚至不得不说标签吗？ （笑着哭）听我解释。

通常我们在选项卡中使用2到4个选项。如果不是太麻烦，我们只需要在.wxml中逐个编写选项卡及其相应的内容。但是，一旦有更多选项，如果你逐一编写它们，wxml中的代码将看起来像“懒妈妈的脚布”。此时，必须使用wx:来循环输出选项。此外，如果每个选项的内容相似，则可以通过选项卡的单击事件获取当前选项的id，如果根据id进行条件渲染，则使用wx:来确定当前选项卡显示的数据。这里再次提示我们的NBA锦标赛详情页面，此页面上的玩家列表，滑动项目包含一个包含5个选项的选项卡。

4，自定义日历

为了获得更好的体验，必须始终将体育赛事添加到日历中，以便用户更轻松地查看赛事日程安排。如果您使用选择器组件，用户体验可能会令人不满意，那么您如何自定义日历？在参考了大神的方法之后，得到了以下分析：

您可以左右切换月份并显示当前月份日历。腾讯体育官方的小程序日历可以左右滑动，类似于“热门”页面。由于还没有解决方案，因此这里不使用滑动组件。日历主体中的每月日期是一个二维数组，每月的周数是数组的长度，因此wxml中的日期输出需要使用两个wx:部分代码如下：{{item.date}} {{item.gameNum}}游戏默认突出显示当天的日期，并点击特定日期以突出显示它。这实现起来相对简单，只需通过click事件获取当前点击日期，使用.wxml中的三目操作符来确定获取日期是否与数据中的日期相同，从而实现高亮效果。今天回来。单击“返回到今天”返回“顶部”页面并显示当天的活动。使用小程序自带API—— wx.navigateBack（OBJECT）返回上一页。以下是该文档的屏幕截图：值得注意的是：

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

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。