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

效果图

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

问题及解决方案

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-ite