uniapp自定义滚动标签栏tab

最新推荐文章于 2024-08-26 19:42:20 发布

shinjie1210

最新推荐文章于 2024-08-26 19:42:20 发布

阅读量1.1k

点赞数

文章标签： vue javascript css3 uni-app

本文链接：https://blog.csdn.net/shinjie1210/article/details/118709868

版权

本文介绍了在uniapp中创建自定义滚动标签栏的方法，包括新建组件、配置组件和编写CSS样式。通过uni的scroll-view标签结合v-for显示数据，并利用scroll-into-view动态绑定实现自动滚动。详细步骤包括在组件文件夹创建组件，设置scroll-view属性，以及应用CSS样式以防止换行。

摘要由CSDN通过智能技术生成

新建组件

配置组件

编写css样式

本文主要介绍如何在uniapp里自定义一个向vant组件库里的标签栏滚动 ←点击查看

新建组件

首先在component文件夹里新建组件同名文件夹和组件

配置组件

通过uni自带的scroll-view标签，用v-for展示数据（数据自己编一组就行）

标签属性说明看这里 ←点击查看

<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-view" :scroll-into-view="toview">
			<view v-for="(item,index) in topBarList" class="scroll-item" :id="'item'+index" :class="{active:index