话不多说，上一张我部门坐镇NBA资讯小程序的图。作为一个不久前才接触小程序的前端白菜，恰逢近期NBA双抢七如火如荼，骑士和勇士一次次巅峰对决（真相：真的看腻了--），决定写个NBA资讯小程序玩玩。说说小程序的开发工具：vscode微信开发者工具开发技术：(Wxml)Html(Wxss)cssjavascript开发过程：注册一个appid，马上就可以开始开发简单教程这里也提一下两个网站EasyMock,Iconfont的前者是一个持久化服务，可以快速生成模拟数据。这是我的数据接口。后者可以找到很多你想要的小图标库效果。作为一个新手，写的过程中没有问题，那又如何呢？也许吧--说说我遇到的问题吧~1.首页日期游戏数据切换（也就是可以点击和水平滚动的部分）当时看到这个以为无非是左右键点击事件切换数据然后想到绑定滑动日期并开始写入左右点击结束写入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',//比较分数，改变高分索引的颜色：index,current:index,showLeft:true,//把图标改成浅色图标})}注意一个细节，当left和right没有变化时切换多个数据时，图标颜色会发生变化，变浅，表示无法点击，所以需要执行if判断是否是left和r右边是临界值，即数组的第一项和最后一项。turnleft:function(e){constindex=this.data.index-this.data.num;如果（索引<=-1）{返回；}elseif(index==0){this.changeleft();}else{this.changeleft();this.setData({showLeft:false,showRight:false,})}}，左边显示的方法和右边类似。于是开始手写滑动部分。我在这里因缺乏经验而遭受了很大的损失。一想到滑动，马上就想到了scroll-view。写了一大堆，点进去就傻了。日期立即改变，没有滑动的影响，这不行吗？所以我使用scroll-left来计算距离并为每个项目设置填充。写了半天，做了个测试，还是没有滑动效果……（吐了一口老血）终于用swiper搞定了效果swiperchange:function(e){constcurrent=e.detail.current;//获取当前swiper索引constind=this.data.index;//上一个数组的索引constdex=current-ind;//判断左滑右滑if(current-ind>0){this.setData({num:dex//滑动多少条})this.turnright()//左滑事件this.setData({num:1//必须返回1，因为每次点击事件都会改变数组itemis1})}elseif(current-ind<0){this.setData({num:-dex})this.turnleft()this.setData({num:1})}2.文章页面返回这里可以直接设置navigator或者bindtap，但是注意如果返回是tabBar，打开类型和跳转方式是switchTabback:function(e){wx.switchTab({url:"../../页面/索引/索引"});}3.scroll-view滑动问题很多人可能会遇到swiper无法滑动等问题。注意以下几点。scroll-view中需要滑动的元素不能用float浮动；scroll-view中的packages需要slide元素的大框使用display:flex;它没有效果;需要在scroll-view中滑动的元素应该使用display:inline-block;水平排列元素；包裹滚动视图的大框具有清晰的宽度和样式-->overflow:hidden;空白：nowrap;4。上拉加载下拉刷新问题下拉刷新需要在当前页面的json或app.json中设置"enablePullDownRefresh":true，下拉事件中必须加上wx.hideLoading()，否则刷新点会一直出现onPullDownRefresh(){//console.log('Downloaded');wx.showLoading({title:'拼命加载',})wx.request({url:API_BASE,success:(res)=>{this.setData({news:res.data.data.new,currentPage:1,hide:false})wx.hideLoading();//!!!一定要加上wx.stopPullDownRefresh()}})}，可以使用onPullDownRefresh()或者bindscrolltolower()前者是页面底部，后者是滚动条到底部，两者根据情况使用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,//传播运算符（传播）是三个点（...）。就像rest参数的逆运算一样，将一个数组转换成逗号分隔的参数序列es6语法...res.data.data.new,];this.setData({news,currentPage})wx.hideLoading();}})},5.wx:ifselection渲染问题在我的项目中，有很多样式或者事件操作需要单独添加。您可以将wx:if与块一起用于选择渲染
