小程序懒加载

 js里面的样式

data:{
      looplist:[],//轮播图数据
      goodlist:[],//商品列表数据
    },
onReady: function () {
    //调用请求轮播图数据的方法
    this.renderSwiper()
    //调用获取商品列表的数据方法
    this.renderGoods()
  },
//定义一个状态（变量）
    current:1,
/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('ji');
    this.current++
    this.renderGoods()
  },

  //获取商品列表数据
  renderGoods(){
    request({
      url:`/goods?_page=${this.current}&_limit=5`
//good里面读取到（前后端交互）里，每次读取this指向的代码个，且最多读取（）后端交互数据）次
    }).then(res=>{
      console.log(res);
     this.setData({
      goodlist:[...this.data.goodlist,...res]
//...的意思就是保留前面的数据不做更改，（this.data.goodlist）与(res)进行比较

//
    })
  })
}
})

this是指向的意思，就是指向文件然后跟他请求数据this.renderSwiper()指向renderSwiper请求数据

//good里面读取到（前后端交互）里，每次读取this指向的代码个，且最多读取（）后端交互数据）次

//...的意思就是保留前面的数据不做更改，（this.data.goodlist）与(res)进行比较

wxml

<!-- 商品列表区域 -->
<view wx:for="{{goodlist}}" wx:key="index" class="goodBox">
  <image src="http://localhost:3000{{item.poster}}" mode="widthFix"></image>
  <view>
    <view>{{item.title}}</view>
    <view style="color:red;">价格：￥{{item.price}}
    </view>
    <view>好评率：{{item.goodcomment}}</view>
  </view>
</view>

{}为内链接

{{}}为外链接