商城微信小程序（二）——完成分類頁(yè)面及商品列表頁(yè)

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：115

分類頁(yè)面預(yù)覽圖：

分類頁(yè)面主要代碼

index.js

// pages/category/index.js
import {
  request
} from "../../request/index.js"
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    //左側(cè)菜單數(shù)據(jù)
    leftMenuList: [],
    //右側(cè)的商品數(shù)據(jù)
    rightContent: [],
    // 被點(diǎn)擊的左側(cè)菜單
    currentIndex: 0,
    //右側(cè)距離頂部距離
    scrollTop:0,

  },
  //接口返回?cái)?shù)據(jù)
  Cates: [],

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {

    /**
     * 1,先判斷本地儲(chǔ)存中有沒有舊的緩存數(shù)據(jù)
     * 本地存儲(chǔ)數(shù)據(jù)格式：
     * {time.Data.now(),data:[.....]}
     * 2，沒有數(shù)據(jù)就發(fā)送請(qǐng)求，
     * 3，有舊數(shù)據(jù)且舊數(shù)據(jù)沒有過期，直接使用本地儲(chǔ)存中的舊數(shù)據(jù)
     */
    const Cates = wx.getStorageSync("cates");
    if (!Cates) {
      //不存在，獲取數(shù)據(jù)
      this.getCates();
    } else {
      //本地有緩存
      if (Date.now() - Cates.time > 1000 * 10) {
        //超過10s就重新發(fā)送請(qǐng)求
        this.getCates();
      } else {
        //可以使用本地緩存數(shù)據(jù)
        this.Cates = Cates.data;
        //構(gòu)造左側(cè)菜單數(shù)據(jù)
        let leftMenuList = this.Cates.map(v => v.cat_name);
        //構(gòu)造右側(cè)商品數(shù)據(jù)
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent,
        })
      }
    }


  },

  //獲取分類數(shù)據(jù)
  getCates() {
    request({
      url: "/categories"
    }).then(res => {
      this.Cates = res.data.message;
      //把結(jié)構(gòu)數(shù)據(jù)存入本地緩存
      wx.setStorageSync('cates', {
        time: Date.now(),
        data: this.Cates
      });

      //構(gòu)造左側(cè)菜單數(shù)據(jù)
      let leftMenuList = this.Cates.map(v => v.cat_name);
      //構(gòu)造右側(cè)商品數(shù)據(jù)
      let rightContent = this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightContent,
      })
    })
  },

  //左側(cè)菜單的點(diǎn)擊事件
  handleItemTap(e) {
    /*
    1,獲取被點(diǎn)擊菜單的索引
    2，給data中的currentIndex賦值
    3,根據(jù)不同索引渲染右側(cè)內(nèi)容
    */
    const {
      index
    } = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      //設(shè)置右側(cè)距離頂部距離
      scrollTop:0,
    });

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.json

{
  "usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "商品分類"
}

index.less

vscode的easyless插件會(huì)自動(dòng)生成index.wxss

/* pages/category/index.wxss */
page {
    height: 100%;
}

.cates {
    height: 100%;

    .cates_container {
        // less中使用calc注意
        height: ~'calc(100vh - 90rpx)';
        display: flex;

        .left_menu {
            flex: 2;

            .menu_item {
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30rpx;
            }

            .active {
                color: var(--themeColor);
                border-left: 5rpx solid currentColor;
            }
        }

        .right_content {
            flex: 5;

            .good_group {
                .good_title {
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .delimiter {
                        color: #cccccc;
                        padding: 0 10rpx;
                    }

                    .title {}
                }

                .good_list {
                    display: flex;
                    flex-wrap: wrap;

                    navigator {
                        width: 33.33%;
                        text-align: center;

                        image {
                            width: 50%;
                        }

                        .goods_name {}
                    }

                }
            }
        }
    }
}

index.wxml

<view class="cates">
    <SearchInput>SearchInput>
    <view class="cates_container">
        
        <scroll-view scroll-y="{{true}}" class="left_menu">
            <view class="menu_item {{index===currentIndex?'active':''}}" 
            wx:for="{{leftMenuList}}" 
            wx:key="*this"
            bindtap="handleItemTap"
            data-index="{{index}}"
            >
            {{item}}
            view>
        scroll-view>
        
        <scroll-view scroll-top="{{scrollTop}}" scroll-y="{{true}}" class="right_content">
            <view class="good_group"
            wx:for="{{rightContent}}"
            wx:for-index="index1"
            wx:for-item="item1"
            >
                <view class="good_title">
                    <text class="delimiter">/text>
                    <text class="title">{{item1.cat_name}}text>
                    <text class="delimiter">/text>
                view>
                <view class="good_list">
                    <navigator class="" target="" url="/pages/goods_list/index?cid={{item2.cat_id}}" hover-class="navigator-hover" open-type="navigate"
                    wx:for="{{item1.children}}"
                    wx:for-index="index2"
                    wx:for-item="item2"
                    wx:key="cat_id"
                    >
                    <image class="" src="{{item2.cat_icon}}" mode="widthFix" lazy-load="false" binderror="" bindload="" />
                    <view class="goods_name">{{item2.cat_name}}view>  
                        
                    navigator>
                      

                view>
            view>
        scroll-view>
    view>
view>

分類頁(yè)面難點(diǎn)記錄

主要是布局文件index.less的編寫，注意less語(yǔ)法。

商品列表頁(yè)面預(yù)覽

商品列表頁(yè)功能：支持上拉加載更多，下拉刷新等

商品列表頁(yè)主要代碼：

index.js

// pages/goods_list/index.js
import {
  request
} from "../../request/index.js"
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    tabs: [{
        id: 0,
        value: "綜合",
        isActive: true,
      },
      {
        id: 1,
        value: "銷量",
        isActive: false,
      },
      {
        id: 0,
        value: "價(jià)格",
        isActive: false,
      },
    ],
    //商品列表數(shù)據(jù)
    goodsList: [],
  },

  //接口要的參數(shù)
  QueryParams: {
    query: "",
    cid: "",
    pagenum: 1,
    pagesize: 10
  },
  //總頁(yè)數(shù)
  totalPages: 1,
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {
    this.QueryParams.cid = options.cid;
    this.getGoodsList();
  },
  //獲取商品列表頁(yè)數(shù)據(jù)
  getGoodsList() {
    request({
      url: "/goods/search",
      data: this.QueryParams,
    }).then(res => {
      //console.log(res);
      //數(shù)據(jù)總條數(shù)
      const total = res.data.message.total;
      //計(jì)算總頁(yè)數(shù)
      this.totalPages = Math.ceil(total/this.QueryParams.pagesize);
      //console.log(this.totalPages);
      this.setData({
        goodsList:[...this.data.goodsList,... res.data.message.goods],
      });
      //手動(dòng)關(guān)閉下拉刷新界面,首次進(jìn)入也不會(huì)報(bào)錯(cuò)，無需處理
      wx.stopPullDownRefresh();
        
    })
  },

  //標(biāo)題點(diǎn)擊事件 從子組件Tabs傳遞過來的
  handleTabsItemChange(e) {
    //獲取被點(diǎn)擊的標(biāo)題索引
    const {
      index
    } = e.detail;
    //修改源數(shù)組
    let {
      tabs
    } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    //賦值到data中
    this.setData({
      tabs
    });
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {
    //console.log('下拉了');
    //重置數(shù)組
    this.setData({
      goodsList:[],
    });
    //重置頁(yè)碼
    this.QueryParams.pagenum=1;
    //重新發(fā)送請(qǐng)求
    this.getGoodsList();
  },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
    //console.log('頁(yè)面觸底了~~');
    //判斷還有沒有下一頁(yè)數(shù)據(jù)
    if(this.QueryParams.pagenum>=this.totalPages){
      //沒有下一頁(yè)數(shù)據(jù)了
      wx.showToast({
        title: '沒有更多數(shù)據(jù)了',
      });
        
    }else{
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.json

{
  "usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput",
    "Tabs":"../../components/Tabs/Tabs"
  },
  "navigationBarTitleText": "商品列表頁(yè)", 
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

index.less

/* pages/goods_list/index.wxss */
.first_tab {
    .goods_item {
        display: flex;
        border-bottom: 1px solid #cccccc;

        .goods_img_wrap {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
                width: 70%;
            }
        }

        .goods_info_wrap {
            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;
            }
        }

    }
}

index.wxml

<SearchInput>SearchInput>

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
  <block wx:if="{{tabs[0].isActive}}">
    <view class="first_tab">
      <navigator class="goods_item"
      wx:for="{{goodsList}}"
      wx:key="goods_id"
      >
        
        <view class="goods_img_wrap">
          <image class="" src="{{item.goods_small_logo}}" mode="widthFix" lazy-load="false" binderror="" bindload="" />
        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="{{tabs[1].isActive}}">1block>
  <block wx:elif="{{tabs[2].isActive}}">2block>
Tabs>

商品列表頁(yè)引用的組件Tabs主要代碼

Tabs.js

// components/Tabs/Tabs.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //接收父組件的傳值
    tabs:{
      type:Array,
      value:[],
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap(e){
      //獲取點(diǎn)擊索引
      const {index} = e.currentTarget.dataset;
      //觸發(fā)父組件的事件
      this.triggerEvent("tabsItemChange",{index})
    },
  }
})

Tabs.less

.tabs{
  .tabs_title{
      display: flex;
      
      .title_item{
          display: flex;
          padding: 15rpx 0;
          justify-content: center;
          align-items: center;
          flex: 1;
      }
  }
  .tabs_content{}  
}

.active{
    color: var(--themeColor);
    border-bottom: 5rpx solid currentColor;
}

Tabs.wxml

<view class="tabs">
    <view class="tabs_title">
        <view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" wx:key="id" bindtap="handleItemTap" data-index="{{index}}">
            {{item.value}}
        view>
    view>
    <view class="tabs_content">
        <slot>slot>
    view>
view>