世界杯来了!小程序赛事操作来一波~
前言
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-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 页面
结语
由于是第一次写项目,相关知识储备也还不够,从项目开始到现在,遇到的问题可不止这些,但解决问题的过程是辛苦也是富有乐趣的。目前这个项目也还有很多部分没有实现,但会持续更新,如果感兴趣欢迎交流讨论。之后将全面学习mpvue和wepy小程序框架,若使用框架写这个项目相信会简单一些,有机会可以写一个mpvue版。
我的项目在这里哦。
转载于:https://juejin.im/post/5b22f71fe51d4558ab7b16d4
世界杯来了!小程序赛事操作来一波~相关推荐
- 【云开发】小程序端操作数据库详解
文章目录 云数据库 云数据库简介 手动操作数据库 小程序端操作数据库
- 【云开发】- 在小程序端操作云存储
文章目录 云存储介绍 手动操作云存储 小程序端操作云存储 上传文件 下载文件 删除文件 获取临时链接 云存储介绍 云存储用于将文件存储到云端: 云存储提供高可用.高稳定.强安全的云端存储服务; 持任意 ...
- 解决微信开发者工具报错:当前开发者未绑定此AppID,请到小程序后台操作重试
解决微信开发者工具报错:当前开发者未绑定此AppID,请到小程序后台操作重试 首先要在微信公众平台注册小程序账号,注意与公众号(订阅号)账号区别开来,小程序账号不是公众号账号,登录后小程序账号的界面是 ...
- 小程序 按需_小程序后台操作,新手需知道的几个要点
这节课我们来讲一下小程序的基本知识及后台操作,对上一节课的内容做一个补充.相信大家对于小程序都有一定的了解,对于小程序无需安装,无需下载,即开即用,用完即走的使用方式也是非常熟悉的.那么对于我们想要搭 ...
- 上拉加载更多后台数据_微信小程序端操作云数据库
一.分清几个概念 1.云开发,简言之就是可以直接用微信小程序开发者工具完成一个从前台到后台的小程序项目. 2.小程序端,使用云开发的时候,miniprogram中写的代码可以叫做小程序端(真实是我不知 ...
- pyautogui微信小程序自动化操作
一个很简单的脚本,用途是实现微信小程序或其他软件的自动化操作,如果是长期固定需求,可以考虑把脚本内置到常用软件的环境中,比如MAYA,当我每天打开MAYA时就可以实现每天自动在小程序上疫情打卡 主要使 ...
- 从0开始小程序云开发-实现指定用户小程序端操作云数据库,云存储
需求:指定的用户可以操作云数据库,云存储. 思路:由于无法直接权限里设置,而云函数具有所有权限,所以通过前端调用云函数,在云函数中鉴权,操作数据库,存储. 在云数据库中设置一个admin集合,存放指定 ...
- 点点客小程序服务器,点点客小程序新增操作引导功能,小白轻松上手
点点客小程序搭建大赛仍在如火如荼的进行,本周将评选出最终的一二三等奖.点点客小程序对于产品的优化更新也在从未停止,此次,点点客小程序后台大变身,增加了多款人性化引导功能,操作难度最大化降低,使用体验更 ...
- Python实战小程序——Excel操作
Python中的Excel操作 python中的xlrd和xlwt两个模块可以对Excel进行各项操作. 第一步:安装模块的方法: 1.下载一个ez_setup.p ...
最新文章
- 用java调用oracle存储过程总结
- 互联网亿级日志实时分析平台,一个码农半小时就可以搞定,只因ELK
- Spring Boot——[Disconnected from the target VM, address: IP:端口, transport: #39socket#39]解决方案
- 深度解密Go语言之sync.map
- Mysql 多实例multi_mysqld_multi多实例运行
- Java虚拟机知识汇总,有这些还怕面试被问到?
- photoshop cs5快捷键的用法总结
- mp4视频转gif图片
- 【MyBatis】MyBatis Order By 字段动态动态排序
- DTrace Tools
- 微信小程序获取验证码
- selenium 复制粘贴
- Kruskal算法(克鲁斯卡尔)最小生成树
- ESP-Hosted:降低物联网设备的部署成本与复杂性
- 【POI 2006】 Tet-Tetris-3D
- 神马开户推广点击量和消费增加了很多是否有异常?
- OSPF协议中查看路由器的RID
- 信息时代碎片化学习的理解
- 系统集成项目管理工程师历年考题
- html 页面下雪效果,HTML页面下雪特效