我去！又是勇士和骑士？--NBA资讯小程序

2018-06-07 本文已影响14人我服啦

image

话不多说，先来一张我科的图坐镇

NBA资讯小程序出来啦

作为一个刚接触小程序不久的前端小白菜，恰逢最近NBA如火如荼的双抢七大战、骑士与勇士又又又又又一次的巅峰对决(实话：真的看腻了- -),决定写一个NBA资讯的小程序来玩玩。下面讲讲小程序的开发

开发工具：vscode 微信开发者工具
开发技术：(Wxml)Html (Wxss)css javascript
开发流程：注册一个appid就可以马上进行开发了简易教程

这里还要提一下两个网站Easy Mock、Iconfont
前者是可以快速生成模拟数据的持久化服务这里展示下我的数据接口
后者是可以找到许多你想要的小图标库

效果图

image

身为新手写的过程中不碰到些问题那怎么可能呢- -

下面就来讲讲我碰到的那些问题吧~

1.首页日期比赛数据切换(就是那个能点能横滑的部分)
当时看到这觉得无非就是左右button点击事件进行切换数据然后再跟滑动date绑定一起
想到就开始写左右点击一下就写完了

changeleft:function() {
    const index = 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) {
    const index = this.data.index -this.data.num;
      if (index <= -1) {
        return;
      } else if (index == 0) {
        this.changeleft();
      } else {
        this.changeleft();
        this.setData({
          showLeft: false,
          showRight: false,
        })
      }
  },

这里展示左边的方法右边类似。于是开始着手写滑动那部分，这里就吃了没有经验的大亏了，想到滑动立马想到了scroll-view 噼里啪啦写了一堆，可一点击我傻了这日期是瞬间变化没有滑动的那个效果啊，难道是这个不行？于是我又使用scroll-left 算距离每一项设置好padding 写了许久也算是完成了一试还是没有滑动效果...(一口老血吐出来)

最后还是用swiper搞定了这效果

 swiperchange:function(e) {
    const current = e.detail.current;//取当前swiper index
    const ind = this.data.index;//之前数组的index 
    const dex = current - ind;//判断左滑右滑
      if(current-ind >0){
        this.setData({
          num:dex //滑动多少项
        })
      this.turnright() //左滑事件
      this.setData({
        num:1   //必须回1 因为点击事件每次改变的数组项为1
      })
    }else if(current - ind <0){
      this.setData({
        num:-dex 
      })
     this.turnleft()
     this.setData({
       num:1
     })
    }

2.文章页返回

image

这里可以设置navigator 或者直接bindtap 但是要注意返回为tabBar的话 open-type 和跳转方法为switchTab

image

back: function (e) {
    wx.switchTab({
      url: "../../pages/index/index"
    });
  }

3.scroll-view滑动问题
很多人可能会碰到swiper不能滑动等问题要注意以下几点

scroll-view 中的需要滑动的元素不可以用 float 浮动；
scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；
scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；
包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden; white-space:nowrap;

4.上拉加载下拉刷新问题

下拉刷新需要在当前页的json或者app.json设置
"enablePullDownRefresh": true,
下拉事件一定要加wx.hideLoading() 不然刷新小点一直出现

onPullDownRefresh() {
   // console.log('下拉了');
   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() 前者是页面触底后者是scroll滚动条到底部，二者视情况使用。

 onReachBottom() {
   let { currentPage, totalPages } = this.data  //解构当前页和共几页 es6语法
   if (currentPage >= totalPages) {
     this.setData({
       hide:true,
     })
     return;
   }
   wx.showLoading({
     title: '玩命加载中',
   })
   currentPage += 1; //页数+1
   wx.request({
     url: API_BASE,
     success: (res) => {
       const news = [ //将请求的数据和原本的数据一起放入
         ...this.data.news,//扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列 es6语法
         ...res.data.data.new,
       ];
       this.setData({
         news,
         currentPage
       })
       wx.hideLoading();
     }
   })
 },

5.wx:if选择渲染问题
在我的项目中有很多需要单独添加样式或者事件操作可以使用wx:if 配合block进行选择渲染

image

<block wx:if="{{video.title == item.title}}">
                <view class="btn" style="display: none;"></view>
                <text class="content-title " style="white-space: normal;color: #42F32F;">{{item.title}}</text> 
            </block>
            <block wx:else>
                    <view class="btn" ></view>
                    <text class="content-title" style="white-space: normal;">{{item.title}}</text> 
                </block>

6.navigator跳转问题

   var that = this;
   var id = that.data.new.id;//获取文章id
   if (id === 'n8') {//判断是否为最后一篇
     wx.showModal({
       title: '提示',
       content: '没有更多内容了',
       showCancel: false,
       success: function (res) {
       } })
       return; //为最后一篇则无需请求数据
   }
   wx.request({
     url: API_BASE,
     success: (res) => {
       for (let i = 0; i < res.data.data.new.length; i++) {
         if (id === res.data.data.new[i].contentId) { //判断是否请求到对应数据
          // console.log("找到了");
           this.setData({
             news: res.data.data.new[i + 1],//将请求到数据的数据传入
           })
           var it = this;
           wx.navigateTo({
             url: 'news?id=' + this.data.news.contentId + '&title=' + this.data.news.title + '&from=' + this.data.news.from + '&image=' + this.data.news.image + '&content=' + this.data.news.content + ''
           })
         }
       }
     }
   })
 },

写在最后

在写项目中还有碰到许多问题,video黑边 scroll-view文字换行等问题，大家百度或者查看官方文档大都能解决。
由于是初学小程序不久，很多方面没有考虑好没有对request等进行封装，模块组件化，写了很多重复的代码。不过这都不是事，谁不是先爬再跑的!
想了解更多可以查看我的项目
欢迎大家提供宝贵的建议和意见，社区重在分享，有啥好东西就别藏着啦

image

我去！又是勇士和骑士？--NBA资讯小程序

NBA资讯小程序出来啦

效果图

image

身为新手写的过程中不碰到些问题那怎么可能呢- -

写在最后

猜你喜欢

热点阅读