小程序商品列表

文章目录 前言列表详情

---

前言

提示：这里可以添加本文要记录的大概内容：

小程序页面

js ：页面逻辑wxml：页面结构json：页面配置wxss： 页面样式

页面效果

列表

先获取接口数据

//生命周期函数--监听页面加载
  onLoad(options) {
    this.axios()
  },
  axios(){
    this.data.p++
    
    wx.request({
      url: `http://localhost:8989/getData?p=${this.data.p}`,
      method:"get",
      //请求成功后执行success函数res是我们请求成功后的数据
      success:res=>{
        // console.log(res);
        if (res.errMsg=="request:ok") {
        //setData 修改data 的数据
          this.setData({
          //concat 当需要把一个集合元素添加到另一个集合里面
            "listData":this.data.listData.concat(res.data)
          })
          // console.log(this.data.listData);
        }
      }
    })
 }

wsml页面循环渲染

 <view wx:for="{{listData}}" wx:key="index" wx:for-item="item" class="item"  catchtap="datail" data-id="{{item.id}}">
 //catchtap只自身触发事件，不会传递到父视图 
 //data-属性名="{{属性值}}"
    <image src="{{item.imgUrl}}" class="image"></image>
    <view>
      <view class="title">{{item.title}}</view>
      <view class="newTime"> {{item.newTime}} </view>
    </view>
  </view>

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以

  datail(id){
    console.log(id.currentTarget.dataset.id);
    // ${id.currentTarget.dataset.id}
    
    wx.navigateTo({
      url: `../newDatail/newDatailid=${id.currentTarget.dataset.id}`,
      success:(res)=>{
        console.log(res);
      }
    })
  },
   // 页面上拉触底事件的处理函数
 onReachBottom() {
    this.axios()

  },

详情

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

wxml

  {{listData.title}}
   {{listData.newTime}} 

介绍：{{listData.content}}