我去！又是勇士和騎士？--NBA資訊小程序

話很少說，先來一張我科的圖坐鎮

NBA資訊小程序出來啦

---

做爲一個剛接觸小程序不久的前端小白菜，恰逢最近NBA如火如荼的雙搶七大戰、騎士與勇士又又又又又一次的巔峯對決(實話：真的看膩了- -),決定寫一個NBA資訊的小程序來玩玩。下面講講小程序的開發

• 開發工具：vscode 微信開發者工具
• 開發技術：(Wxml)Html (Wxss)css javascript
• 開發流程：註冊一個appid就能夠立刻進行開發了簡易教程

這裏還要提一下兩個網站Easy Mock、Iconfont
前者是能夠快速生成模擬數據的持久化服務這裏展現下個人數據接口
後者是能夠找到許多你想要的小圖標庫

---

效果圖

身爲新手寫的過程當中不碰到些問題那怎麼可能呢- -

下面就來說講我碰到的那些問題吧~

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

這裏能夠設置navigator 或者直接bindtap 可是要注意返回爲tabBar的話 open-type 和跳轉方法爲switchTab

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進行選擇渲染

<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等進行封裝，模塊組件化，寫了不少重複的代碼。不過這都不是事，誰不是先爬再跑的!
想了解更多能夠查看個人項目
歡迎你們提供寶貴的建議和意見，社區重在分享，有啥好東西就別藏着啦