TDesign电商小程序模板解析02-首页功能

简介: TDesign电商小程序模板解析02-首页功能



上一篇我们搭建了底部的导航条,这一篇来拆解一下首页的功能。首页有如下功能

  • 可以进行搜索
  • 显示轮播图
  • 横向可拖动的页签
  • 图文卡片列表

1 home.json

因为是要使用组件库的组件搭建页面,自然是先需要引入自定义组件

{
  "navigationBarTitleText": "首页",
  "onReachBottomDistance": 10,
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "t-search": "tdesign-miniprogram/search/search",
    "t-loading": "tdesign-miniprogram/loading/loading",
    "t-swiper": "tdesign-miniprogram/swiper/swiper",
    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
    "t-image": "/components/webp-image/index",
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-toast": "tdesign-miniprogram/toast/toast",
    "t-tabs": "tdesign-miniprogram/tabs/tabs",
    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
    "goods-list": "/components/goods-list/index",
    "load-more": "/components/load-more/index"
  }
}

引入的组件还是不少的,贴入配置后发现控制台报错,因为这里既使用到了TDesign中的组件,也使用到了自定义组件,我们需要将报错的组件,自己搭建一下。

其实解决问题就像俄罗斯套娃一样,拿走一个里边还有一个,直到你拿到最后一个才可以

2 goods-list组件

选中components文件夹,右键新建一个文件夹

输入goods-list,然后在goods-list文件夹上右键,点击新建Page

然后输入index,自动生成四个文件,index.wxml、index.wxss、index.json、index.js

自定义组件也是包含四个文件,要依次看模板的代码

index.json

{
    "component": true,
    "usingComponents": {
        "goods-card": "/components/goods-card/index"
    }
}

这里goods-list又继续引用了goods-card组件

index.js

Component({
  externalClasses: ['wr-class'],
  properties: {
    goodsList: {
      type: Array,
      value: [],
    },
    id: {
      type: String,
      value: '',
      observer: (id) => {
        this.genIndependentID(id);
      },
    },
    thresholds: {
      type: Array,
      value: [],
    },
  },
  data: {
    independentID: '',
  },
  lifetimes: {
    ready() {
      this.init();
    },
  },
  methods: {
    onClickGoods(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('click', { ...e.detail, index });
    },
    onAddCart(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('addcart', { ...e.detail, index });
    },
    onClickGoodsThumb(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('thumb', { ...e.detail, index });
    },
    init() {
      this.genIndependentID(this.id || '');
    },
    genIndependentID(id) {
      if (id) {
        this.setData({ independentID: id });
      } else {
        this.setData({
          independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`,
        });
      }
    },
  },
});

自定义组件的externalClasses表示外部样式类,可以在引用的时候传入样式来改变组件的样式。properties表示组件对外暴露的属性,可以根据组件的需要进行设置。method表示组件可以响应的事件,看目前的设置事件是和电商业务相关的,具体是什么含义,我们在调用的时候再分析

index.wxml

<view class="goods-list-wrap wr-class" id="{{independentID}}">
  <block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
    <goods-card
      id="{{independentID}}-gd-{{index}}"
      data="{{item}}"
      currency="{{item.currency || '¥'}}"
      thresholds="{{thresholds}}"
      class="goods-card-inside"
      data-index="{{index}}"
      bind:thumb="onClickGoodsThumb"
      bind:click="onClickGoods"
      bind:add-cart="onAddCart"
    />
  </block>
</view>

这是组件的内容部分,他又使用了一个goods-card组件

index.wxss

.goods-list-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  background: #fff;
}

样式部分还是很简单的,他是设置了一个流式布局,元素是按行排列,要求自动换行,水平对齐是两端对齐,没有内边距并设置了一定的背景色

3 goods-card组件

在components文件夹下再新建一个goods-card文件夹

然后在goods-card文件夹新建一个Page

index.json

{
    "component": true,
    "usingComponents": {
        "price": "/components/price/index",
        "t-icon": "tdesign-miniprogram/icon/icon",
        "t-image": "/components/webp-image/index"
    }
}

好家伙真还是俄罗斯套娃,这个组件又套了两个组件,需要继续新建

index.js

Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    id: {
      type: String,
      value: '',
      observer(id) {
        this.genIndependentID(id);
        if (this.properties.thresholds?.length) {
          this.createIntersectionObserverHandle();
        }
      },
    },
    data: {
      type: Object,
      observer(data) {
        if (!data) {
          return;
        }
        let isValidityLinePrice = true;
        if (data.originPrice && data.price && data.originPrice < data.price) {
          isValidityLinePrice = false;
        }
        this.setData({ goods: data, isValidityLinePrice });
      },
    },
    currency: {
      type: String,
      value: '¥',
    },
    thresholds: {
      type: Array,
      value: [],
      observer(thresholds) {
        if (thresholds && thresholds.length) {
          this.createIntersectionObserverHandle();
        } else {
          this.clearIntersectionObserverHandle();
        }
      },
    },
  },
  data: {
    independentID: '',
    goods: { id: '' },
    isValidityLinePrice: false,
  },
  lifetimes: {
    ready() {
      this.init();
    },
    detached() {
      this.clear();
    },
  },
  pageLifeTimes: {},
  methods: {
    clickHandle() {
      this.triggerEvent('click', { goods: this.data.goods });
    },
    clickThumbHandle() {
      this.triggerEvent('thumb', { goods: this.data.goods });
    },
    addCartHandle(e) {
      const { id } = e.currentTarget;
      const { id: cardID } = e.currentTarget.dataset;
      this.triggerEvent('add-cart', {
        ...e.detail,
        id,
        cardID,
        goods: this.data.goods,
      });
    },
    genIndependentID(id) {
      let independentID;
      if (id) {
        independentID = id;
      } else {
        independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
      }
      this.setData({ independentID });
    },
    init() {
      const { thresholds, id } = this.properties;
      this.genIndependentID(id);
      if (thresholds && thresholds.length) {
        this.createIntersectionObserverHandle();
      }
    },
    clear() {
      this.clearIntersectionObserverHandle();
    },
    intersectionObserverContext: null,
    createIntersectionObserverHandle() {
      if (this.intersectionObserverContext || !this.data.independentID) {
        return;
      }
      this.intersectionObserverContext = this.createIntersectionObserver({
        thresholds: this.properties.thresholds,
      }).relativeToViewport();
      this.intersectionObserverContext.observe(
        `#${this.data.independentID}`,
        (res) => {
          this.intersectionObserverCB(res);
        },
      );
    },
    intersectionObserverCB() {
      this.triggerEvent('ob', {
        goods: this.data.goods,
        context: this.intersectionObserverContext,
      });
    },
    clearIntersectionObserverHandle() {
      if (this.intersectionObserverContext) {
        try {
          this.intersectionObserverContext.disconnect();
        } catch (e) {}
        this.intersectionObserverContext = null;
      }
    },
  },
});

这个组件里边的代码会更复杂一点

index.wxml

<view
  id="{{independentID}}"
  class="goods-card"
  bind:tap="clickHandle"
  data-goods="{{ goods }}"
>
  <view class="goods-card__main">
    <view class="goods-card__thumb" bind:tap="clickThumbHandle">
      <t-image
        wx:if="{{ !!goods.thumb }}"
        t-class="goods-card__img"
        src="{{ goods.thumb }}"
        mode="aspectFill"
        lazy-load
      />
    </view>
    <view class="goods-card__body">
      <view class="goods-card__upper">
        <view wx:if="{{ goods.title }}" class="goods-card__title">
          {{ goods.title }}
        </view>
        <view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags">
          <view
            wx:for="{{ goods.tags }}"
            wx:key="index"
            wx:for-item="tag"
            class="goods-card__tag"
            data-index="{{index}}"
          >
            {{tag}}
          </view>
        </view>
      </view>
      <view class="goods-card__down">
        <price
          wx:if="{{ goods.price }}"
          wr-class="spec-for-price"
          symbol-class="spec-for-symbol"
          symbol="{{currency}}"
          price="{{goods.price}}"
        />
        <price
          wx:if="{{ goods.originPrice && isValidityLinePrice }}"
          wr-class="goods-card__origin-price"
          symbol="{{currency}}"
          price="{{goods.originPrice}}"
          type="delthrough"
        />
        <t-icon
          class="goods-card__add-cart"
          prefix="wr"
          name="cartAdd"
          id="{{independentID}}-cart"
          data-id="{{independentID}}"
          catchtap="addCartHandle"
          size="48rpx"
          color="#FA550F"
        />
      </view>
    </view>
  </view>
</view>

index.wxss

.goods-card {
  box-sizing: border-box;
  font-size: 24rpx;
  border-radius: 0 0 16rpx 16rpx;
  border-bottom: none;
}
.goods-card__main {
  position: relative;
  display: flex;
  line-height: 1;
  padding: 0;
  background: transparent;
  width: 342rpx;
  border-radius: 0 0 16rpx 16rpx;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  flex-direction: column;
}
.goods-card__thumb {
  flex-shrink: 0;
  position: relative;
  width: 340rpx;
  height: 340rpx;
}
.goods-card__thumb:empty {
  display: none;
  margin: 0;
}
.goods-card__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
}
.goods-card__body {
  display: flex;
  flex: 1 1 auto;
  background: #fff;
  border-radius: 0 0 16rpx 16rpx;
  padding: 16rpx 24rpx 18rpx;
  flex-direction: column;
}
.goods-card__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
}
.goods-card__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  height: 72rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}
.goods-card__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}
.goods-card__tag {
  color: #fa4126;
  background: transparent;
  font-size: 20rpx;
  border: 1rpx solid #fa4126;
  padding: 0 8rpx;
  border-radius: 16rpx;
  line-height: 30rpx;
  margin: 0 8rpx 8rpx 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.goods-card__down {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  line-height: 32rpx;
  margin: 8rpx 0 0 0;
}
.goods-card__origin-price {
  white-space: nowrap;
  font-weight: 700;
  order: 2;
  color: #bbbbbb;
  font-size: 24rpx;
  margin: 0 0 0 8rpx;
}
.goods-card__add-cart {
  order: 3;
  margin: auto 0 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spec-for-price {
  font-size: 36rpx;
  white-space: nowrap;
  font-weight: 700;
  order: 1;
  color: #fa4126;
  margin: 0;
}
.spec-for-symbol {
  font-size: 24rpx;
}

总结

看首页功能,其实看wxml文件并不复杂,复杂在了既调用了组件库中的组件,又自己封装了很多组件,而且是俄罗斯套娃,一层嵌套一层,这么个看要想用熟练一套模板也不是简单的事情。

相关文章
|
10天前
|
监控 数据挖掘 BI
探索项目管理系统:解析五大功能,洞悉项目成功的关键
项目新手常忽视管理系统的价值,而高手已借助系统实现规划清晰。优秀的项目管理系统必备五大功能:项目WBS分解、图表报表、工时管理、团队协作和任务自动化。WBS能将复杂项目拆分成可管理任务,明确责任,评估时间和资源需求,便于跟踪进度。Zoho Projects作为示例,支持创建任务层级,利用甘特图和资源利用图监控进度和资源分配,工时管理则帮助控制项目时间和成本。同时,系统促进团队协作,如通过即时通讯和知识库增强团队凝聚力,而任务自动化则减少错误,提升效率。
24 1
|
10天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
42 0
|
10天前
|
开发框架 前端开发 开发者
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
【5月更文挑战第13天】Uniapp 的状态管理对于构建复杂跨平台应用至关重要,它包括全局变量、Vuex 风格管理。核心概念有 State、Actions 和 Mutations。通过状态定义、动作设计和突变管理,提高开发效率和代码可维护性。实际案例和与其他框架比较显示了 Uniapp 的优势。理解并有效利用状态管理,能提升应用质量和开发效率。
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
|
1天前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
4天前
|
小程序 JavaScript Java
购物|电商购物小程序|基于微信小程序的购物系统设计与实现(源码+数据库+文档)
购物|电商购物小程序|基于微信小程序的购物系统设计与实现(源码+数据库+文档)
11 0
|
8天前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
10天前
|
开发框架 搜索推荐 安全
【Uniapp 专栏】基于 Uniapp 的电商应用开发案例解析
【5月更文挑战第12天】使用Uniapp跨平台框架开发电商应用,结合丰富的组件和API,实现首页、商品详情、购物车及订单等关键功能。注重界面设计和用户体验,处理商品逻辑、订单管理和支付接口集成。同时,适应多平台特性,加入个性化推荐、商品直播和社交分享等特色功能,以降低成本、提升竞争力,打造高效购物体验。此案例展示了Uniapp在电商领域的潜力和优势。
|
10天前
|
小程序
微信小程序用户登陆和获取用户信息功能实现
微信小程序用户登陆和获取用户信息功能实现
22 0
|
10天前
|
安全 前端开发 Java
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
31 3
|
10天前
项目管理工具计划模板解析:项目管理工具的双重功能与创建方法
本文介绍了项目计划模板的含义和重要性。项目计划模板是用于规划项目结构的可编辑文档,帮助团队明确任务、分配责任和管理时间。模板有助于跟踪项目进度、避免任务冲突,并简化会议安排。创建模板通常涉及选择合适的项目管理工具,如Zoho Projects或Microsoft Excel,然后分解任务、定义日期并持续调整。在Zoho Projects中,用户可以按步骤创建模板,包括命名、添加任务和设置相关细节。
22 0

热门文章

最新文章

推荐镜像

更多