微信小程序功能：上拉加载、下拉刷新，tabs组件，文本溢出

微信小程序–商品列表页面

包含功能点：

• tab切换–自定义tabs组件
• 上拉加载更多和下拉刷新
• 如果后台没有图片，显示暂无图片
• 商品内容：显示2行，超出省略号代替…

结构：goods_list.wxml

<searchInput></searchInput>
<tabs tabList="{{tabList}}" binditemChange="handleItemChange">
  <block wx:if="{{tabList[0].isActive}}">
    <view class="first_tab">
      <navigator class="goods_item u-f" wx:for="{{goodsList}}" wx:key="goods_id" url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
        <!-- 左侧  图片容器 -->
        <view class="goods_img_wrap u-f-ajc">
          <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image>
        </view>
        <!-- 右侧 商品容器 -->
        <view class="goods_info_wrap">
          <view class="goods_name">{{item.goods_name}}</view>
          <view class="goods_price">￥{{item.goods_price}}</view>
        </view>
      </navigator>
    </view>
  </block>
  <block wx:elif="{{tabList[1].isActive}}">1</block>
  <block wx:elif="{{tabList[2].isActive}}">2</block>
  <block wx:else>3</block>
</tabs>

样式：goods_list.less

.first_tab {
  .goods_item {
    border-bottom: 1rpx solid #ccc;

    // 左侧：图片容器
    .goods_img_wrap {
      flex: 2;

      image {
        width: 70%;
      }
    }

    // 右侧：商品容器
    .goods_info_wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 3;
      // 内容只显示2行，超出显示...
      .goods_name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .goods_price {
        color: var(--themeColor);
        font-size: 32rpx;
      }
    }
  }
}

逻辑：goods_list.js文件

import { request } from "../../request/index.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabList: [
      {
        id: 0,
        name: "综合",
        isActive: true,
      },
      {
        id: 1,
        name: "销量",
        isActive: false,
      },
      {
        id: 2,
        name: "价格",
        isActive: false,
      }
    ],
    // 商品列表数据
    goodsList: []

  },
  // 总页数
  totalPages: 1,
  // 请求参数
  QueryParams: {
    query: "",
    cid: "",
    pagenum: 1,
    pagesize: 10
  },

  // 点击每一项
  handleItemChange(e) { 

    // 1. 获取被点击的标题索引
    const { index } = e.detail;

    /**
      * 严谨做法：重新拷贝一份数组，再对这个数组的备份进行处理
      * let tabList = JSON.parse(JSON.stringify(this.data.tabList));
      * 一般做法：let {tabList} = this.data;
      */
    // 2. 修改源数组--激活选中效果
    let tabList = JSON.parse(JSON.stringify(this.data.tabList));
    tabList.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false;
    })
    
    // 3. 重新赋值
    this.setData({
      tabList
    })

  },
  // 获取商品列表数据
  getGoodsList() {

    request({ url: "/goods/search", data: this.QueryParams }).then(res => {

      // 获取 总条数
      const total = res.total;

      // 计算总页数
      this.totalPages = Math.ceil(total / this.QueryParams.pagesize)

      // 数组拼接
      this.setData({
        goodsList: [...this.data.goodsList, ...res.goods]
      })

      // 关闭下拉刷新的窗口  如果没有调用下拉刷新的窗口  直接关闭也不会报错
      wx.stopPullDownRefresh();

    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { 

    console.log(options.cid)

    // 将传递的商品cid，传入接口参数中
    this.QueryParams.cid = options.cid || "";
    this.QueryParams.query = options.query || "";

    // 获取商品列表数据
    this.getGoodsList()

  },
  // 页面滚动条触底事件--上拉加载更多
  onReachBottom() {

    // 判断是否有下一页数据
    if (this.QueryParams.pagenum >= this.totalPages) {

      // 没有下一页数据
      wx.showToast({ title: "没有下一页数据" });

    } else {

      // 还有下一页数据
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },
  // 下拉刷新事件--需要在页面的json文件中开启一个配置项
  onPullDownRefresh() {

    // 1.重置数组
    this.setData({
      goodsList: []
    });

    // 2.重置页码
    this.QueryParams.pagenum = 1;
    
    // 3.重新发送请求
    this.getGoodsList();
  }
})

页面配置文件：goods_list.json文件

{
  "usingComponents": {
    "searchInput": "../../component/searchInput/searchInput",
    "tabs": "../../component/tabs/tabs"
  },
  "navigationBarTitleText": "商品列表",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}