小程序 新闻列表

需求

使用小程序实现网络数据获取，加载新闻列表，点击查看详情，和上划加载新数据
列表页面
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)
  },