作为一个刚接触小程序不久的前端小白菜,恰逢最近NBA如火如荼的双抢七大战、骑士与勇士又又又又又一次的巅峰对决(实话:真的看腻了--),决定写一个NBA资讯的小程序来玩玩。下面讲讲小程序的开发
下面就来讲讲我碰到的那些问题吧~
1.首页日期比赛数据切换(就是那个能点能横滑的部分)当时看到这觉得无非就是左右button点击事件进行切换数据然后再跟滑动date绑定一起想到就开始写左右点击一下就写完了
changeleft:function(){constindex=this.data.index-this.data.num;//获取改变后的那组数据下标this.setData({agenda:this.data.result[index],//将球队名球队分数传入light:this.data.result[index].leftgrade>this.data.result[index].rightgrade'1':'2',//比较分数大小将分数高的color改变index:index,current:index,showLeft:true,//改变图标为浅色图标})}注意一个细节,当左右没有更多数据切换时图标颜色会改变变浅色示意不能点了所以要进行if判断左右两边是否为临界值也就是数组的第一项和最后一项。
turnleft:function(e){constindex=this.data.index-this.data.num;if(index<=-1){return;}elseif(index==0){this.changeleft();}else{this.changeleft();this.setData({showLeft:false,showRight:false,})}},这里展示左边的方法右边类似。于是开始着手写滑动那部分,这里就吃了没有经验的大亏了,想到滑动立马想到了scroll-view噼里啪啦写了一堆,可一点击我傻了这日期是瞬间变化没有滑动的那个效果啊,难道是这个不行?于是我又使用scroll-left算距离每一项设置好padding写了许久也算是完成了一试还是没有滑动效果...(一口老血吐出来)
最后还是用swiper搞定了这效果
这里可以设置navigator或者直接bindtap但是要注意返回为tabBar的话open-type和跳转方法为switchTab
back:function(e){wx.switchTab({url:"../../pages/index/index"});}3.scroll-view滑动问题很多人可能会碰到swiper不能滑动等问题要注意以下几点
4.上拉加载下拉刷新问题
"enablePullDownRefresh":true,
onReachBottom(){let{currentPage,totalPages}=this.data//解构当前页和共几页es6语法if(currentPage>=totalPages){this.setData({hide:true,})return;}wx.showLoading({title:'玩命加载中',})currentPage+=1;//页数+1wx.request({url:API_BASE,success:(res)=>{constnews=[//将请求的数据和原本的数据一起放入...this.data.news,//扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列es6语法...res.data.data.new,];this.setData({news,currentPage})wx.hideLoading();}})},5.wx:if选择渲染问题在我的项目中有很多需要单独添加样式或者事件操作可以使用wx:if配合block进行选择渲染