【愚公系列】《微信小程序与云开发从入门到实践》031-开发一款多Tab页自定义组件

原创

愚公搬代码

发布于 2025-01-21 00:15:13

2690

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代移动应用中，良好的用户体验离不开清晰的界面布局和流畅的交互设计。微信小程序作为一种轻量级的应用形式，广泛应用于各类场景，而多Tab页设计则越来越成为用户界面的重要组成部分。通过合理的Tab页面设计，用户可以更方便地在不同功能模块之间切换，从而提升使用的便捷性和舒适感。

本文将带您深入探讨如何在微信小程序中开发一款多Tab页自定义组件。我们将从组件的基本概念入手，逐步引导您了解组件的创建、样式设计以及如何实现Tab之间的切换和交互。同时，我们还将分享一些最佳实践和常见问题的解决方案，帮助您避免在开发过程中可能遇到的陷阱。

🚀一、开发一款多Tab页自定义组件

关于自定义组件的理论知识，已经介绍过了。下面我们来动手实践一下，相信读者在平时使用小程序的时候，一定经常见到支持多栏目的分类内容页面。这类页面在新闻资讯类应用中尤为常见，比如新闻可能分为娱乐新闻、体育新闻、生活新闻等，通过点击不同的分类 Tab，页面中会为用户展示不同类型的新闻。

🔎1.动手开发自定义组件

🦋1.1 创建组件文件夹

首先，在示例工程的 components 文件夹下新建一个名为 pagesView 的子文件夹，并在其中创建一组名为 pagesView 的自定义组件文件。

🦋1.2 编写 WXML 模板

接下来，处理 pagesView.wxml 文件，编写组件的模板结构。这个自定义组件大致可以分为上下两部分：上面部分是标题栏，下面部分是具体展示内容的区域。

以下是 pagesView.wxml 的示例代码：

<!-- component/pagesView/pagesView.wxml -->
<view class="container">
  <view class="top-bar">
    <block wx:for="{{items}}" wx:key="title">
      <view class="{{item.selected ? 'top-item-selected' : 'top-item'}}" bindtap="clickItem" data-item="{{item}}">
        <text>{{item.title}}</text>
      </view>
    </block>
  </view>
  <view class="content">
    <slot></slot>
  </view>
</view>

代码解析

标题栏部分：使用 wx:for 渲染标题项，通过 selected 字段来标识当前选中的栏目。
内容部分：使用 <slot> 标签，允许组件的使用者自定义内容区域的展示。

🦋1.3 编写逻辑代码

在 pagesView.js 文件中实现逻辑代码，示例代码如下：

// component/pagesView/pagesView.js
Component({
  properties: {
    pages: {
      type: Object,
    },
  },
  observers: {
    'pages': function (obj) {
      console.log(obj);
      this.setData({
        items: obj.items,
      });
    },
  },
  data: {
    items: [],
  },
  methods: {
    clickItem: function (event) {
      // 点击项触发的方法
      this.data.items.forEach((v, i) => {
        // 设置选中状态
        if (v.title == event.currentTarget.dataset.item.title) {
          v.selected = true;
        } else {
          v.selected = false;
        }
      });
      this.setData({
        items: this.data.items,
      });
      this.triggerEvent("pagechange", event.currentTarget.dataset.item);
    },
  },
});

代码解析

属性：pages 是组件调用者传递进来的数据。
监听器：当 pages 属性变化时，更新组件内部的 items 数据。
点击事件：处理标题栏项的点击，设置选中状态，并触发自定义事件 pagechange，将用户行为传递出去。

🦋1.4 编写样式代码

在 pagesView.wxss 文件中编写基础的样式代码，示例代码如下：

/* component/pagesView/pagesView.wxss */
.container {
  width: 100vw;
  height: 100vh;
}

.top-bar {
  height: 40px;
  display: flex;
  overflow-x: auto;
}

.top-item {
  line-height: 24px;
  height: 24px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  flex-shrink: 0;
  border: 3px solid transparent;
}

.top-item-selected {
  line-height: 24px;
  height: 24px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  flex-shrink: 0;
  border: red 3px solid;
  border-radius: 8px;
}

.content {
  width: 100%;
  height: calc(100vh - 40px);
}

代码解析

样式设置：定义了容器、标题栏和内容区域的样式，确保组件在视觉上清晰、易用。

🔎2.使用自定义组件

🦋2.1 引入组件

首先，在 customComponent.json 文件中引入 pagesView 组件。确保组件的路径设置正确。

{
  "usingComponents": {
    "pages-view": "/components/pagesView/pagesView"
  }
}

🦋2.2 修改 WXML 文件

接下来，修改 customComponent.wxml 文件以使用新的多Tab页组件。以下是示例代码：

<!-- pages/customComponent/customComponent.wxml -->
<pages-view pages="{{pages}}" bindpagechange="refreshContent">
  <view style="width: 100%; height: 100%; font-size: 40px; text-align: center;">
    {{pageTitle}}
  </view>
</pages-view>

代码解析

pages-view：使用自定义的多Tab页组件，并绑定 pagechange 事件。
内容展示：在组件内部展示当前选中栏目对应的标题。

🦋2.3 实现逻辑代码

在 customComponent.js 文件中实现数据和交互逻辑。以下是示例代码：

// pages/customComponent/customComponent.js
Page({
  data: {
    pages: {
      items: [
        { title: "栏目A", selected: true },
        { title: "栏目B" },
        { title: "栏目C" },
        { title: "栏目D" },
        { title: "栏目E" },
        { title: "栏目F" },
        { title: "栏目G" },
        { title: "栏目H" }
      ]
    },
    pageTitle: "栏目A"
  },
  
  refreshContent: function (event) {
    this.setData({
      pageTitle: event.detail.title
    });
  }
});

代码解析

数据结构：pages 包含多个栏目，设置 selected 属性以标识当前选中的栏目。
更新标题：refreshContent 方法根据用户点击的栏目更新 pageTitle。

🦋2.4 运行效果

运行代码后，效果如图所示。当点击标题栏上的某个栏目时，页面标题会相应更新。

🦋2.5 进一步优化

当前开发的多Tab页组件功能较为基础，存在一些可改进的地方，包括但不限于：

样式配置：允许用户灵活配置标题栏的样式。
切换动画：增加页面切换时的动画效果，提升用户体验。
滑动切换：支持左右滑动手势实现栏目切换，增强交互性。

鼓励读者根据自己的需求对这个组件进行进一步的优化和扩展！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度