duang~NBA资讯小程序

时间 2019-11-16

标签 duang nba 资讯程序繁體版

原文原文链接

话很少说，先来一张我科的图坐镇

NBA资讯小程序出来啦

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

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

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

效果图

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

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

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判断左右两边是否为临界值也就是数组的第一项和最后一项。java

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 写了许久也算是完成了一试仍是没有滑动效果...(一口老血吐出来)git

最后仍是用swiper搞定了这效果es6

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.文章页返回

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

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

3.scroll-view滑动问题

不少人可能会碰到swiper不能滑动等问题要注意如下几点github

scroll-view 中的须要滑动的元素不能够用 float 浮动；json
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进行选择渲染

<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等进行封装，模块组件化，写了不少重复的代码。不过这都不是事，谁不是先爬再跑的!
想了解更多能够查看个人项目欢迎你们提供宝贵的建议和意见，社区重在分享，有啥好东西就别藏着啦