效果展示
步骤1:获取相关产品列表数据
onLoad: function ( options) {
console. log ( options)
let pid= Number ( options. pid)
this . setData ( {
pid: pid
} )
console. log ( typeof pid, pid)
let url= 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search'
let params= {
cid: pid,
pagesize: 7
}
let promise= getRequest ( url, params)
promise. then ( ( res) => {
let pagenum= Number ( res. data. message. pagenum)
this . setData ( {
goodsProduct: res. data. message. goods,
total: res. data. message. total,
pagenum: pagenum
} )
console. log ( res)
} )
}
渲染产品至页面上
< view class = " goodsDetail" >
< view class = " everyDetail" wx: for= " {{goodsProduct}}" wx: key= " index" >
< view class = " productLeft" >
< image class = " productPic" mode = " widthFix" src = " {{item.goods_small_logo}}" />
</ view>
< view class = " productRight" >
< view class = " productName" > {{item.goods_name}}</ view>
< view class = " goodsPrice" >
< text> ¥{{item.goods_price}}</ text>
</ view>
</ view>
</ view>
</ view>
步骤3:上拉继续加载
onReachBottom: function ( ) {
let total= this . data. total
let pagenum= this . data. pagenum
let bigNum= Math. ceil ( total/ 7 )
console. log ( typeof bigNum, bigNum)
if ( pagenum< bigNum) {
console. log ( '继续加载' )
let url= 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search'
let params= {
cid: this . data. pid,
pagesize: 7 ,
pagenum: pagenum
}
let promise= getRequest ( url, params)
promise. then ( ( res) => {
this . setData ( {
goodsProduct: this . data. goodsProduct. concat ( res. data. message. goods) ,
total: res. data. message. total,
pagenum: pagenum
} )
} )
pagenum= pagenum+ 1
this . setData ( {
pagenum: pagenum
} )
}
if ( pagenum>= bigNum) {
console. log ( '已经加载完毕' )
}
}
点击产品进入详情页
showDetail: function ( e) {
let id= Number ( e. currentTarget. dataset. goodsid)
console. log ( id, typeof id)
wx. navigateTo ( {
url: '../../pages/detail/detail?goodsid=' + id
} )
}