当前位置:网站首页>uniapp horizontal tab (horizontal scrolling navigation bar) effect demo (organization)
uniapp horizontal tab (horizontal scrolling navigation bar) effect demo (organization)
2022-08-04 23:19:00 【I am happy】
效果图:
<!-- horizontal tab(Scrolls the navigation bar horizontally) -->
<template>
<view>
<!-- 顶部导航栏 -->
<view class="horizonal-tab">
<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
<block v-for="(item,index) in tabBars" :key="index">
<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
{
{
item.name}}
<view class="scroll-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
<!-- 内容区 -->
<view class="content">
<!-- 滑块视图 -->
<swiper :current="tabIndex" @change="tabChange">
<!-- current:当前所在滑块的index -->
<swiper-item v-for="(content,index) in contentList" :key="index">
<view class="content">{
{
content}}</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0,
/* 选中标签栏的序列,默认显示第一个 */
contentList: [
"关注",
"推荐",
"热点",
"体育",
'财经',
'娱乐',
'哈',
'哈1',
'哈2',
'哈3',
],
tabBars: [{
name: '关注',
id: 'guanzhu'
},
{
name: '推荐',
id: 'tuijian'
},
{
name: '热点',
id: 'redian'
},
{
name: '体育',
id: 'tiyu'
},
{
name: '财经',
id: 'caijing'
},
{
name: '娱乐',
id: 'yule'
},
{
name: '哈',
id: 'ha'
},
{
name: '哈1',
id: 'ha1'
},
{
name: '哈2',
id: 'ha2'
},
{
name: '哈3',
id: 'ha3'
}
]
}
},
methods: {
//切换选项卡
toggleTab(index) {
this.tabIndex = index;
},
//滑动切换swiper
tabChange(e) {
console.log(e);
this.tabIndex = e.detail.current;
}
}
}
</script>
<style>
.horizonal-tab {
}
.horizonal-tab .active {
color: red;
}
.scroll-tab {
white-space: nowrap;
/* 必要,The navigation bar can only be horizontal*/
border-bottom: 1rpx solid #eee;
text-align: center;
}
.scroll-tab-item {
display: inline-block;
/* 必要,The navigation bar can only be horizontal*/
margin: 20rpx 30rpx 0 30rpx;
}
.active .scroll-tab-line {
border-bottom: 5rpx solid red;
border-top: 5rpx solid red;
border-radius: 20rpx;
width: 70rpx;
}
</style>
边栏推荐
- To Offer | 03. Repeat Numbers in the array
- Service Mesh落地路径
- 请你说一下final关键字以及static关键字
- ffplay视频播放原理分析
- 正则表达式绕过
- 2022/8/4 树上差分+线段树
- 仪表板展示 | DataEase看中国:数据呈现中国资本市场
- 中国的顶级黑客在国际上是一个什么样的水平?
- 社区分享|腾讯海外游戏基于JumpServer构建游戏安全运营能力
- [Paper Notes KDD2021] MixGCF: An Improved Training Method for Graph Neural Network-based Recommender Systems
猜你喜欢
随机推荐
2022/8/4 树上差分+线段树
I was rejected by the leader for a salary increase, and my anger rose by 9.5K after switching jobs. This is my mental journey
零基础如何入门软件测试?再到测开(小编心得)
未上市就“一举成名”,空间媲美途昂,安全、舒适一个不落
go语言的日志实现(打印日志、日志写入文件、日志切割)
文献阅读十——Detect Rumors on Twitter by Promoting Information Campaigns with Generative Adversarial Learn
To Offer | 03. Repeat Numbers in the array
[Cultivation of internal skills of string functions] strcpy + strcat + strcmp (1)
一点点读懂cpufreq(二)
各行各业都受到重创,游戏行业却如火如荼,如何加入游戏模型师职业
@Async注解的作用以及如何实现异步监听机制
Reconfigure the ffmpeg plugin in chrome
容联云发送短信验证码
365天深度学习训练营-学习线路
npm基本操作及命令详解
学生管理系统架构设计
[Cultivation of internal skills of memory operation functions] memcpy + memmove + memcmp + memset (4)
【3D建模制作技巧分享】ZBrush如何设置笔刷快捷键
js中小数四则运算精度问题原因及解决办法
一点点读懂regulator(二)