商品列表⻚⾯
效果
业务逻辑
1.加载商品列表数据
2.启⽤下拉⻚⾯功能
1.⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true enablePullDownRefresh:true
2.⻚⾯的js中,绑定事件 onPullDownRefresh
3.启⽤上拉⻚⾯功能 onReachBottom onReachBottom ⻚⾯触底事件
4.加载下⼀⻚功能
接口
商品列表搜索
https://api-hmugo-web.itheima.net/api/public/v1/goods/search
1.wxml文件代码
<!-- 搜索框 -->
<search-input></search-input>
<!-- tabs栏 -->
<tabs tabs="{{tabs}}" bind:tabsItemChange="handletabsItemChange">
<block wx:if="{{tabs[0].isActive}}">
<view class="first_tab">
<navigator
class="goods_item"
wx:for="{{goodsList}}"
wx:key="goods_id"
url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
>
<!-- 左侧图片容器 -->
<view class="goods_img">
<image mode="widthFix" src="{{item.goods_small_logo ?item.goods_small_logo:'http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_400x400.jpg' }}" />
</view>
<!-- 右侧商品容器 -->
<view class="goods_info">
<view class="goods_name">{{item.goods_name}}</view>
<view class="goods_price">¥{{item.goods_price}}</view>
</view>
</navigator>
</view>
</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
</tabs>
2.less文件代码
.first_tab{
.goods_item{
display: flex;
border-bottom: 1px solid #ccc;
.goods_img{
flex: 2;
display: flex;
justify-content: center;
align-items: center;
image{
width: 70%;
}
}
.goods_info{
flex: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
.goods_name{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods_price{
color:var(--themeColor);
font-size: 32rpx;
}
}
}
}
3.js文件代码
// pages/goods_list/index.js
//一.用户上滑页面,滚动条触底,开始加载下一页数据
//1.找到滚动条触底事件(微信小程序开发文档)
//2.判断还有没有下一页数据
//(获取到总页数,获取到当前的页码,判断一下当前页码是否大于等于总页数
//总页数=Math.ceil(总条数 /页容量pagesize) =Math.ceil(23 / 10))
//3.假如没有下一页数据 就弹出一个提示
//4.假如还有下一页数据 就加载下一页数据(当前页码++ ,重新发送请求 数据请求回来 要对data中的数组进行拼接而不是全部替换)
//二.下拉刷新页面
//1.触发下拉刷新事件
//2.重置数据数组
//3.重置页码 设置为1,发送请求
//4.数据请求回来了手动关闭等待
import {request} from '../../request/index'
Page({
data: {
tabs:[
{
id:0,
value:"综合",
isActive:true
},
{
id:1,
value:"销量",
isActive:false
},
{
id:0,
value:"价格",
isActive:false
},
],
//保存商品列表数据
goodsList:[]
},
//接口要的参数
QueryParams:{
query:"",
cid:"",
pagenum:1,
pagesize:10
},
//总页数
totalPages:1,
onLoad: function (options) {
this.QueryParams.cid=options.cid
this.getGoodsList()
},
//获取商品列表数据
async getGoodsList(){
const {data:res}=await request({url:'/goods/search',data:this.QueryParams})
console.log(res);
//获取总条数
const total=res.message.total
//计算总页数
this.totalPages=Math.ceil(total/this.QueryParams.pagesize)
console.log(this.totalPages);
this.setData({
//拼接数组
goodsList:[...this.data.goodsList,...res.message.goods]
})
//关闭下拉刷新的窗口
wx.stopPullDownRefresh()
},
//标题点击事件,从子组件传递过来
handletabsItemChange(e){
//获取被点击的标题索引
const {index}=e.detail
//修改源数组
let {tabs}=this.data
tabs.forEach((v,i)=>i===index?v.isActive=true :v.isActive=false);
//赋值到data中
this.setData({
tabs
})
},
//页面上滑,滚动条触底事件
onReachBottom(){
//判断还有没有下一页数据
if(this.QueryParams.pagenum>=this.totalPages){
//没有下一页数据了
// console.log('没有下一页数据了');
wx.showToast({
title: '没有下一页数据了',
})
}else{
//有下一页数据
//console.log('有下一页数据');
this.QueryParams.pagenum++
this.getGoodsList()
}
},
//下拉刷新事件
onPullDownRefresh(){
//1.重置数组
this.setData({
goodsList:[]
})
//2.重置页码
this.QueryParams.pagenum=1
//3.发送请求
this.getGoodsList()
}
})