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>
{}为内链接
{{}}为外链接