小程序 新聞列表

需求

使用小程序實現網絡數據獲取，加載新聞列表，點擊查看詳情，和上劃加載新數據
列表頁面
wxml樣式

<view class="newContainer" bindscrolltolower="upper">
  <view class="newsItem" wx:for="{{newsData}}" wx:key="key" data-id="{{item.id}}" bindtap="showDetail">
    <view>
      <image class="imageClass" src="{{item.imgUrl}}">圖片</image>
    </view>
    <view class="newRight">
      <text>{{item.title}}</text>
      <text>{{item.newTime}}</text>
    </view>
  </view>
</view>

生命週期函數–監聽頁面加載

  onLoad: function (options) {
    wx.showLoading({
      title: '加載中...', //用戶網絡不好是顯示小菊花
    })
    新聞列表請求數據
    wx.request({
      url: 'http://localhost:8989/getData',
      //這裏的this會受到axios的影響, 所有使用箭頭函數
      success:res=>{
        this.setData({
          newsData:res.data
        })
        wx.hideLoading();  // 加載出數據後 消失
      }
    })
  },

點擊每條新聞時 跳轉詳情頁
wxml 點擊按鈕上面已寫過

  // 點擊跳轉
  showDetail(e){
    let itemId = e.currentTarget.dataset.id
    // console.log(itemId)
    wx.navigateTo({ //保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
      // 方法1 拼接路徑 傳參 
      // url:"../item/item?id="+itemId
      // 方法2
      url: "../item/item", //點擊跳轉詳情頁面 不在tabBar中註冊的頁面
      success:function(res){  // 通過eventChannel向被打開頁面傳送數據
        // console.log(res)
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: itemId }
        )       
      }
    })
  },

詳情頁面接收數據
item.js文件

  data: {
    newsData:[]
  },
  /* 生命週期函數--監聽頁面加載*/
  onLoad: function (option) {
    wx.showLoading({
      title: '加載中...', //用戶網絡不好是顯示小菊花
    })
    // console.log(option) // 方法1中接收數據
    // 方法2接收數據
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', ({data})=> {
      // console.log(data)
      wx.request({
        url: `http://localhost:8989/getDetail/?id=${data}`, //帶參請求 後端數據
        success:(res)=>{
          console.log(res)
          this.setData({ //修改數據加載
            newsData:res.data
          })
          wx.hideLoading();  // 加載出數據消失 
        }
      })
    })
  },

詳情頁，wxml較爲簡單這裏就不做過多說明

<view>
    <view>
      <image class="imageClass" src="{{newsData.imgUrl}}">圖片</image>
    </view>
    <view>
      <text>{{newsData.title}}</text>
      <text>{{newsData.newTime}}</text>
    </view>
</view>

上拉加載數據

  data: {
    p:2  //p  因爲前7條數據已經獲取到 添加到newsData中  從第8條開始獲取
  },
  // 傳參數p  ，p就像分頁的頁碼
  getData(p){  //上拉加載新的數據 封裝
    // console.log(p)
      wx.request({
        url: 'http://localhost:8989/getData?p='+p,
        success:res=>{
          this.setData({ //修改數據    舊數據    新數據
            newsData:null,
            newsData:[...this.data.newsData,...res.data], //請求到新數據 和 舊數據拼接這樣
            p:this.data.p+1  // 數據請求成功之後加1      
          })
           console.log(...res.data)    
          // console.log(p)
        }
      })
  },
    /* 頁面上拉觸底事件的處理函數  */
  onReachBottom: function () {
    this.getData(this.data.p)//調用 傳默認值
    // console.log(this.data.p)
  },