小程序scroll-view和swiper结合使用，实现标签功能（完美版）

最新推荐文章于 2025-01-12 17:12:34 发布

原创

最新推荐文章于 2025-01-12 17:12:34 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #xss #前端

本文介绍如何在微信小程序中利用scroll-view和swiper组件，实现标签功能。通过动态渲染scroll-view和控制swiper的滑动，使得内容能够随着scroll-view的滚动定位到相应位置。经过一天的尝试和研究，找到了一种满意的方法。

微信小程序为了实现scroll-view配合swiper实现tab栏切换动态的渲染scroll-view 滑动swiper scroll-view滚动到相对应的地方，网上找了很多资料，但都不尽人意，小白试了进一天，终于找到答案，闲话不多说，直接上代码。

代码：


##wxss

.top_bottomView {
   
   
  display: flex;
  border-bottom: 4rpx solid #f5f5f5;
}

.scroll-x {
   
   
  height: 78rpx;
  width: 88%;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
}
/* 隐藏scrollbar */
::-webkit-scrollbar {
   
   
  width: 0;
  height: 0;
  color: transparent;
}

.view-inline{
   
   
  width: 17.2%;
  height: 100%;
  display: inline-block;
}

.view-item {
   
   
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 32rpx;
  opacity: 0.6;
}
.item-active {
   
   
  opacity: 1;
  font-size: 36rpx;
}

.top_rightView {
   
   
  width: 12%