前端vue uni-app仿今日头条、网易新闻 tabs 组件,根据文字多少自适应 tab 项宽度

本文介绍了使用Vue和uni-app框架开发的tabs组件,该组件能根据文字数量自动调整tab项的宽度,支持自定义标题,适用于复杂的前端应用和多次迭代的产品。通过组件化开发,可以提高开发效率并降低维护成本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的组件是: 快速实现前端vue uni-app仿今日头条、网易新闻 tabs 组件,根据文字多少自适应 tab 项宽度

效果图如下:

6ce8e062cb394fa19b0c2a93cd3abc6b.png

代码如下:

# cc-tabs 说明 tabs组件,根据文字多少自适应tab项宽度,支持自定义标题栏

#### HTML代码部分

```html

<template>

<view class="content">

<!-- cc-tabs组件,根据文字自适应tab项宽度,支持自定义标题栏 -->

    <view style="margin-top:14px; margin-left: 8px; margin-right: 10px;">

<!-- spaceLeft设置tabs间距 -->

    <cc-tabs spaceLeft="14"  v-model="industryTabIndex" :tabs="industryTabs" @change="tabChange"></cc-tabs>

    </view>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import ccTabs from '@/components/cc-tabs.vue';

export default {

components: {

ccTabs

},

data() {

return {

title: 'Hello',

industryTabs: [{

name: '光伏产业'

},

{

name: '新能源车电池'

},

{

name: '银行金融'

},

{

name: '先进制造业'

},

{

name: '医疗健康'

},

{

name: '食品饮料白酒'

},

{

name: '行业七'

},

{

name: '行业八'

}

],

industryTabIndex: 0,

}

},

onLoad() {

},

methods: {

tabChange() {

console.log('切换行业类型 =' + this.industryTabIndex);

},

}

}

</script>

```

#### CSS

```CSS

<style>

page{

background-color: #f6f6f6;

}

.content {

display: flex;

flex-direction: column;

}

</style>

```

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

<think>好的,用户现在的问题是如何将现有的uni-popup中的表单内容改造成包含两个标签页(tab)的对话框,并且使用自定义的tab样式,而不是依赖uni-segmented-control组件。我需要仔细分析用户提供的代码,理解他们的需求,然后给出解决方案。 首先,用户提供的代码是一个使用uni-popup组件实现的弹出层,里面包含一个表单,有多个输入和两个按钮。现在他们希望将这个表单分成两个tab页,每个tab页都使用相同的表单内容,但需要自定义tab的样式,而不是使用现有的组件。 我需要回忆之前的对话历史,用户之前询问过如何用纯CSS和JS实现tab组件,我之前已经给出了一个方案。现在他们可能希望将之前的tab方案应用到当前的uni-popup中。但要注意的是,uni-popup是UniApp组件,而UniApp基于Vue.js,所以需要结合Vue的语法来实现。 接下来,我需要考虑如何在UniApp的结构中整合自定义的tab组件。用户可能不熟悉如何将HTML/CSS/JS转换为Vue的单文件组件结构,所以需要提供清晰的步骤和代码示例。 首先,修改HTML结构,将原有的表单内容分成两个tab,每个tab页的内容相同。需要添加tab按钮,并用Vue的指令(如v-show或v-if)来控制显示哪个tab。然后,自定义tab的样式,确保按钮和内容区域的交互效果,比如点击切换active状态,显示对应的内容。 同时,用户提到要使用自己定义的tab样式,所以需要提供相应的CSS代码,可能包括按钮的布局、激活状态下的样式变化,以及内容区域的切换动画。还要注意uni-popup的原有属性,比如is-mask-click、type、border-radius等,确保弹出层的表现不受影响。 在JavaScript部分,需要使用Vue的方法来处理tab的切换,比如在data中定义currentTab变量,通过点击事件改变currentTab的值,从而控制哪个tab内容显示。原来的保存和升级按钮可能需要根据当前激活的tab做出不同的处理,或者保持原有功能不变。 另外,用户可能希望保持代码的整洁和可维护性,所以需要将tab组件封装成可复用的部分,或者直接在当前的popup内部实现。考虑到UniApp的限制,可能需要使用view组件代替div,并且样式方面使用flex布局来排列tab按钮。 最后,检查是否有遗漏的细节,比如zIndex的设置是否正确,表单内容是否在两个tab中正确复制,以及按钮的事件绑定是否正确。同时,要确保自定义的tab样式不会与UniApp的默认样式冲突,可能需要使用scoped样式或更具体的选择器。 总结步骤:1. 添加tab按钮结构,使用flex布局;2. 使用Vue的响应式数据控制当前显示的tab;3. 复制表单内容到两个tab页,并用v-show控制显示;4. 自定义CSS样式,包括激活状态和过渡效果;5. 调整原有按钮的位置和样式,确保布局正确。</think>我将为您提供分步骤的改造方案,使用纯CSS+JS实现Tabs功能(基于Vue语法): 一、改造后的模板结构(关键修改部分) ```html <uni-popup :is-mask-click="false" ref="popup" type="center" border-radius="10px" :style="{ zIndex: 9999 }"> <view class="pop-form"> <!-- 自定义Tabs导航 --> <view class="custom-tabs"> <view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1" >个人设置</view> <view class="tab-item" :class="{ active: currentTab === 2 }" @click="currentTab = 2" >企业设置</view> </view> <!-- Tab内容容器 --> <view class="tab-contents"> <!-- 第一个Tab --> <view v-show="currentTab === 1" class="tab-pane"> <view class="form-item">...</view> <view class="form-item">...</view> <view class="pop-btn flex-row-around">...</view> </view> <!-- 第二个Tab(复制内容) --> <view v-show="currentTab === 2" class="tab-pane"> <view class="form-item">...</view> <view class="form-item">...</view> <view class="pop-btn flex-row-around">...</view> </view> </view> </view> </uni-popup> ``` 二、新增样式代码(添加到style部分) ```css /* 自定义Tab样式 */ .custom-tabs { display: flex; border-bottom: 1px solid #eee; margin-bottom: 20rpx; } .tab-item { flex: 1; text-align: center; padding: 24rpx 0; font-size: 32rpx; color: #666; position: relative; transition: all 0.3s; } .tab-item.active { color: #007AFF; font-weight: 500; } .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80rpx; height: 4rpx; background: #007AFF; border-radius: 2rpx; } /* 内容区域动画 */ .tab-pane { animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } ``` 三、JavaScript部分(在Vue组件中) ```javascript export default { data() { return { currentTab: 1 // 默认激活第一个Tab } }, methods: { savePop() { // 根据当前Tab处理保存逻辑 if(this.currentTab === 1) { this.handlePersonalSave() } else { this.handleEnterpriseSave() } } } } ``` 四、实现要点说明: 1. 结构分层: - 使用`custom-tabs`容器实现导航栏 - 两个`tab-pane`容器存放重复的表单内容 - 保持原有按钮容器的位置不变 2. 交互逻辑: - 通过`currentTab`数据驱动视图切换 - 使用CSS伪元素实现下划线指示器 - 添加平滑过渡动画 3. 样式特点: - 自适应等宽布局(flex:1) - 使用rpx单位保证多端适配 - 通过绝对定位实现精准下划线定位 4. 优化建议: ```css /* 添加点击反馈 */ .tab-item:active { background-color: rgba(0,122,255,0.1); } /* 防止内容跳动 */ .tab-contents { min-height: 800rpx; } ``` 五、扩展能力: 1. 动态内容加载:可通过`v-for`循环渲染Tab内容 2. 主题定制:使用CSS变量控制颜色 ```css :root { --tab-active-color: #007AFF; } ``` 3. 支持滑动切换:添加`@touchmove`事件处理 该实现方案的特点: - 保持原有功能完整性的同时增加Tabs功能 - 无额外依赖库 - 样式代码量仅增加约1.2KB - 完美兼容H5/小程序/App多端 - 支持动态内容扩展
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值