話不多說，先來一張我科的圖坐鎮

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等舉行封裝，模塊組件化，寫了許多反覆的代碼。不過這都不是事，誰不是先爬再跑的!
想相識更多能夠檢察我的項目
迎接人人供應珍貴的建媾和看法，社區重在分享，有啥好東西就別藏着啦