用小程序完成简单的详情列表功能

最近学习了微信小程序，写了一个详情列表

主要思路是：

1.先通过接口拿到数据，在onLoad(options){}中调用wx.request(){}函数，获取到数据

2.完成数据渲染后，，用catchtab给它绑定一个点击事件，点击的时候跳转路由同时把id传到详情页，调用另一个接口拿到详情数据

3.在以上工作都完成后，还有一个上拉触底获取到新数据更新到页面上的功能，在这个函数中再次调用获取数据时的代码，然后传一个页码，用来获取新的数据，把新的数据放到旧的数组里，就实现了。

具体如下
如下图：

在js文件中的 onLoad(options) {}中调用wx.request(){}函数该函数有两个必传的参数是，url(接口地址)，method(传参方式有get和post两种)，然后success：res=>{}获取到数据

// 生命周期函数--监听页面加载
onLoad(options) {
    wx.request({
      url: 'http://localhost:8989/getData',
      method:"GET",
      success:res=>{
        this.setData({
          newList:res.data,
        })
        // console.log(res.data);
      }
      
    })
  },

拿到数据后在页面上渲染，在小程序中渲染数据与vue不一样了，这里要用wx:for="{{newList}}" wx:key="key"来循环数据，默认是item

<view>
  <view class="box" wx:for="{{newList}}" wx:key="key" >
      <view class="box_one" catchtap="tiaoxq" data-id="{{item.id}}" id="{{item.id}}">
        <view class="box_one_img">
           <image class="box_img" src="{{item.imgUrl}}"></image>
        </view>
        <view class="box_one_text">
          <text class="box_txt_one">{{item.title}}</text>
          <text class="box_txt_two">{{item.newTime}}</text>
        </view>
      </view>
      

  </view>
</view>

数据渲染完成后，简单写一下样式，然后绑定一个点击事件，随便把id传过去，先打印一下这个id看看是否一致

tiaoxq(e){
    // console.log(e.currentTarget.dataset.id);
    var id =e.currentTarget.dataset.id
    // console.log(id);
    wx.navigateTo({
      url: `/pages/getgetDetail/index?id=${id}`,
    })
  },

打印一下e(这里的e指的是ement)发现id在currentTarget.dataset中，然后声明一个变量存一下，通过路由传参传到详情页

在详情页接收这个id
然后传到详情的接口中拿详情的数据，渲染到页面就完成了

onLoad(options) {
    var id = options.id
    // console.log(id);
    wx.request({
      url: `http://localhost:8989/getDetail?id=${id}`,
      method:"GET",
      success:res=>{
        this.setData({
          xqList:res.data,
        })
        // console.log(res.data);
      }
      
    })
  },

在这两个功能完成后，还剩下一个上拉触底更新数据，想要实现这个功能要先在app.json文件中加一个"onReachBottomDistance":10上拉10px是触发这个onReachBottom(){}函数，在这个函数中再次调用获取数据时的代码，然后传一个页码，用来获取新的数据，把新的数据放到旧的数组里，就实现了

onReachBottom() {
    this.data.p++
    wx.request({
      url: `http://localhost:8989/getData?p=${this.data.p}`,
      method:"GET",
      success:res=>{
        this.setData({
          newList:[...this.data.newList,...res.data],
        })
        // console.log(...res.data);
        //  console.log(this.data.newList);
      }
    })
  },

这样就实现了一个简单的列表页

ps：小程序新手，勿喷