uniapp使用scroll-view与swiper制作顶部导航栏

最新推荐文章于 2023-04-04 14:45:16 发布

@click

最新推荐文章于 2023-04-04 14:45:16 发布

阅读量1.8k

点赞数

分类专栏： uniapp 文章标签： uniapp swiper scroll-view 顶部导航栏

本文链接：https://blog.csdn.net/weixin_42204597/article/details/103829871

版权

本文介绍了如何使用uniapp的scroll-view和swiper组件来创建顶部导航栏。尽管存在一些小问题，如滑动时事件访问数据的限制，但通过调整scroll-left和current值，可以实现两者间的切换。需要注意的是，获取元素尺寸可能需要异步处理，作者建议使用定时器来解决这个问题。

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

使用scroll-view 与 swiper制作顶部导航复制即可用

图：

代码：

<template>
	<view class="container">
		<view>
			<scroll-view class="scroll-view_H" scroll-x @scroll="scroll" :scroll-left="sc_left">
				<view class="scroll-view-item_H" :class="{active:current===index}" v-for="(item,index) in scrollView" :key="index"
				 @click="changeIndex(index)">{
  {item}}</view>
			</scroll-view>
		</view>
		<view>
			<view class="uni-margin-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing"&g