小程序模板网

查看内容 世界杯来了!小程序赛事操作来一波~

发布时间:2018-06-23 10:07 所属栏目:小程序开发教程

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

效果图

(干巴巴的开讲,还不如先来波动图)

问题及解决方案

1、scroll-view组件

让我们先来看看开发文档

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

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 。这个实现较为简单,步骤如下:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24588.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询