摘要：話(huà)不多說(shuō)，先來(lái)一張我科的圖坐鎮(zhèn)資訊小程序出來(lái)啦作為一個(gè)剛接觸小程序不久的前端小白菜，恰逢最近如火如荼的雙搶七大戰(zhàn)騎士與勇士又又又又又一次的巔峰對(duì)決實(shí)話(huà)真的看膩了決定寫(xiě)一個(gè)資訊的小程序來(lái)玩玩。

話(huà)不多說(shuō)，先來(lái)一張我科的圖坐鎮(zhèn)

作為一個(gè)剛接觸小程序不久的前端小白菜，恰逢最近NBA如火如荼的雙搶七大戰(zhàn)、騎士與勇士又又又又又一次的巔峰對(duì)決(實(shí)話(huà)：真的看膩了- -),決定寫(xiě)一個(gè)NBA資訊的小程序來(lái)玩玩。下面講講小程序的開(kāi)發(fā)

開(kāi)發(fā)工具：vscode 微信開(kāi)發(fā)者工具

開(kāi)發(fā)技術(shù)：(Wxml)Html (Wxss)css javascript

開(kāi)發(fā)流程：注冊(cè)一個(gè)appid就可以馬上進(jìn)行開(kāi)發(fā)了簡(jiǎn)易教程

這里還要提一下兩個(gè)網(wǎng)站Easy Mock、Iconfont
前者是可以快速生成模擬數(shù)據(jù)的持久化服務(wù)這里展示下我的數(shù)據(jù)接口
后者是可以找到許多你想要的小圖標(biāo)庫(kù)

下面就來(lái)講講我碰到的那些問(wèn)題吧~

1.首頁(yè)日期比賽數(shù)據(jù)切換(就是那個(gè)能點(diǎn)能橫滑的部分)
當(dāng)時(shí)看到這覺(jué)得無(wú)非就是左右button點(diǎn)擊事件進(jìn)行切換數(shù)據(jù) 然后再跟滑動(dòng)date綁定一起
想到就開(kāi)始寫(xiě) 左右點(diǎn)擊一下就寫(xiě)完了

changeleft:function() {
    const index = this.data.index - this.data.num;//獲取改變后的那組數(shù)據(jù)下標(biāo)
    this.setData({
      agenda: this.data.result[index],// 將球隊(duì)名 球隊(duì)分?jǐn)?shù)傳入
      light: this.data.result[index].leftgrade > 
      this.data.result[index].rightgrade ? "1" : "2", //比較分?jǐn)?shù)大小 將分?jǐn)?shù)高的color改變
      index: index,
      current:index,
      showLeft: true,//改變圖標(biāo)為淺色圖標(biāo)
    })
  }

注意一個(gè)細(xì)節(jié)，當(dāng)左右沒(méi)有更多數(shù)據(jù)切換時(shí) 圖標(biāo)顏色會(huì)改變 變淺色 示意不能點(diǎn)了
所以要進(jìn)行if判斷左右兩邊是否為臨界值 也就是數(shù)組的第一項(xiàng)和最后一項(xiàng)。

 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,
        })
      }
  },

這里展示左邊的方法 右邊類(lèi)似。于是開(kāi)始著手寫(xiě)滑動(dòng)那部分，這里就吃了沒(méi)有經(jīng)驗(yàn)的大虧了，想到滑動(dòng)立馬想到了scroll-view 噼里啪啦寫(xiě)了一堆，可一點(diǎn)擊我傻了 這日期是瞬間變化 沒(méi)有滑動(dòng)的那個(gè)效果啊，難道是這個(gè)不行？ 于是我又使用scroll-left 算距離 每一項(xiàng)設(shè)置好padding 寫(xiě)了許久也算是完成了 一試還是沒(méi)有滑動(dòng)效果...(一口老血吐出來(lái))

最后還是用swiper搞定了這效果

 swiperchange:function(e) {
    const current = e.detail.current;//取當(dāng)前swiper index
    const ind = this.data.index;//之前數(shù)組的index 
    const dex = current - ind;//判斷左滑右滑
      if(current-ind >0){
        this.setData({
          num:dex //滑動(dòng)多少項(xiàng)
        })
      this.turnright() //左滑事件
      this.setData({
        num:1   //必須回1 因?yàn)辄c(diǎn)擊事件每次改變的數(shù)組項(xiàng)為1
      })
    }else if(current - ind <0){
      this.setData({
        num:-dex 
      })
     this.turnleft()
     this.setData({
       num:1
     })
    }

2.文章頁(yè)返回

這里可以設(shè)置navigator 或者直接bindtap 但是要注意返回為tabBar的話(huà) open-type 和跳轉(zhuǎn)方法為switchTab

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

3.scroll-view滑動(dòng)問(wèn)題
很多人可能會(huì)碰到swiper不能滑動(dòng)等問(wèn)題要注意以下幾點(diǎn)

scroll-view 中的需要滑動(dòng)的元素不可以用 float 浮動(dòng)；

scroll-view 中的包裹需要滑動(dòng)的元素的大盒子用 display:flex; 是沒(méi)有作用的；

scroll-view 中的需要滑動(dòng)的元素要用 dislay:inline-block; 進(jìn)行元素的橫向編排；

包裹 scroll-view 的大盒子有明確的寬和加上樣式--> overflow:hidden; white-space:nowrap;

4.上拉加載下拉刷新問(wèn)題

下拉刷新需要在當(dāng)前頁(yè)的json或者app.json設(shè)置

"enablePullDownRefresh": true,

下拉事件一定要加wx.hideLoading() 不然刷新小點(diǎn)一直出現(xiàn)

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() 前者是頁(yè)面觸底 后者是scroll滾動(dòng)條到底部，二者視情況使用。

 onReachBottom() {
   let { currentPage, totalPages } = this.data  //解構(gòu)當(dāng)前頁(yè)和共幾頁(yè) es6語(yǔ)法
   if (currentPage >= totalPages) {
     this.setData({
       hide:true,
     })
     return;
   }
   wx.showLoading({
     title: "玩命加載中",
   })
   currentPage += 1; //頁(yè)數(shù)+1
   wx.request({
     url: API_BASE,
     success: (res) => {
       const news = [ //將請(qǐng)求的數(shù)據(jù)和原本的數(shù)據(jù)一起放入
         ...this.data.news,//擴(kuò)展運(yùn)算符（ spread ）是三個(gè)點(diǎn)（...）。它好比 rest 參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列 es6語(yǔ)法
         ...res.data.data.new,
       ];
       this.setData({
         news,
         currentPage
       })
       wx.hideLoading();
     }
   })
 },

5.wx:if選擇渲染問(wèn)題
在我的項(xiàng)目中 有很多需要多帶帶添加樣式 或者事件操作 可以使用wx:if 配合block進(jìn)行選擇渲染

                
                {{item.title}} 
            
            
                    
                    {{item.title}} 
                

6.navigator跳轉(zhuǎn)問(wèn)題

   var that = this;
   var id = that.data.new.id;//獲取文章id
   if (id === "n8") {//判斷是否為最后一篇
     wx.showModal({
       title: "提示",
       content: "沒(méi)有更多內(nèi)容了",
       showCancel: false,
       success: function (res) {
       } })
       return; //為最后一篇?jiǎng)t無(wú)需請(qǐng)求數(shù)據(jù)
   }
   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) { //判斷是否請(qǐng)求到對(duì)應(yīng)數(shù)據(jù)
          // console.log("找到了");
           this.setData({
             news: res.data.data.new[i + 1],//將請(qǐng)求到數(shù)據(jù)的數(shù)據(jù)傳入
           })
           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 + ""
           })
         }
       }
     }
   })
 },

在寫(xiě)項(xiàng)目中還有碰到許多問(wèn)題,video黑邊 scroll-view文字換行等問(wèn)題，大家百度或者查看官方文檔大都能解決。
由于是初學(xué)小程序不久，很多方面沒(méi)有考慮好 沒(méi)有對(duì)request等進(jìn)行封裝，模塊組件化，寫(xiě)了很多重復(fù)的代碼。不過(guò)這都不是事，誰(shuí)不是先爬再跑的!
想了解更多可以查看我的項(xiàng)目
歡迎大家提供寶貴的建議和意見(jiàn)，社區(qū)重在分享，有啥好東西就別藏著啦