小程序项目--电商优购day03

商品列表⻚⾯

效果

业务逻辑

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()
  }
})