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

article/2025/11/6 16:03:03

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

主要思路是：

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