微信小程序(黑马优购:商品列表)
1.渲染商品列表并美化布局
{{goods.goods_name}} ¥{{goods.goods_price}}
export default { data() { return { //请求参数对象 queryObj: { //查询关键词 query: '', //商品分类id cid: '', //页码值 pagenum: 1, //每页显示多少条数据 pagesize: 10 }, goodsList: [], total: 0, defaultPic: 'https://img1.baidu.com/it/u=347909717,3772510335&fm=253&fmt=auto&app=138&f=JPEG?w=609&h=500' }; }, onLoad(options) { this.queryObj.query = options.query || '' this.queryObj.cid = options.cid || '' this.getGoodsList() }, methods: { //获取商品列表数据的方法 async getGoodsList(){ const{data: res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj) if(res.meta.status !== 200){ return uni.$showMsg() } this.goodsList = res.message.goods this.total = res.message.total } }
.goods-item{ display: flex; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; .goods-item-left{ margin-left: 5px; .goods-pic{ width: 100px; height: 100px; display: block; } } .goods-item-right{ display: flex; flex-direction: column; justify-content: space-between; .goods-name{ font-size: 13px; } .goods-info-box{ .goods-price{ color: #C00000; font-size: 16px; } } }
2.封装商品列表
{{goods.goods_name}} ¥{{goods.goods_price | tofixed}}
export default { props: { goods: { type: Object, default: {} } }, data() { return { // 默认的图片 defaultPic: 'https://img0.baidu.com/it/u=596425167,3189264920&fm=253&fmt=auto&app=138&f=JPEG?w=361&h=500' }; } }
3.过滤器处理商品价格
¥{{goods.goods_price | tofixed}}
filters: { tofixed(num) { //保留两位小数 return Number(num).toFixed(2) } }
4.上拉加载更多
pages.json
(图片来源网络,侵删)
{ "path" : "goods_list/goods_list", "style" : { //上拉触底 "onReachBottomDistance": 150 } },
async getGoodsList(cb) { const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status !== 200) return uni.$showMsg() //拼接数据 this.goodsList = [...this.goodsList, ...res.message.goods] this.total = res.message.total }, onReachBottom() { if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕!') // 让页码值自增+1 this.queryObj.pagenum++ this.getGoodsList() },
5.节流阀
async getGoodsList(cb) { // 打开节流阀 this.isloading = true}
onReachBottom() { //防止发起额外的请求 if (this.isloading) return
数据加载完毕不会发起额外请求
//判断是否还有下一页数据 //当前页码值 * 每页显示多少条数据 >= 总数条数 if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total) { return uni.$showMsg('数据加载完毕') }
6.下拉刷新
{ "path" : "goods_list/goods_list", "style" : { //上拉触底 "onReachBottomDistance": 150, //开启下拉刷新 "enablePullDownRefresh": true, "backgroundColor": "#F8F8F8" } },
onPullDownRefresh() { // 重置关键数据 this.queryObj.pagenum = 1 this.total = 0 this.isloading = false this.goodsList = [] // 重新发起数据请求 this.getGoodsList(() => uni.stopPullDownRefresh()) }
7.跳转到商品详情页
gotoDetail(goods) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id }) }
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...