当前位置：首页 > news >正文

微信小程序手写滑动tab

news 2025/7/27 17:56:48

微信小程序手写滑动tab

index.wxml

<view class="tab-bar">  <scroll-view scroll-x class="tab-scroll">  <block wx:for="{{tabs}}" wx:key="index">  <view class="tab-item {{currentIndex === index ? 'active' : ''}}" bindtap="switchTab" data-index="{{index}}">{{item.title}}</view>  </block>  </scroll-view>  
</view>

index.wxss

.tab-bar {  width: 80%;  height: 60px;  background-color: #fff;  
}  .tab-scroll {  width: 100%;  height: 100%;  white-space: nowrap;  overflow: hidden;  
}  .tab-item {  display: inline-block;  width: auto;  height: 60px;  line-height: 60px;  padding: 0 16px;  font-size: 16px;  text-align: center;  color: #333;  
}  .tab-item.active {  color: #ff0000; /* 选中的标签颜色 */  border-bottom: 2px solid #ff0000; /* 选中的标签下划线 */  
}

index.js

Page({/*** 页面的初始数据*/data: {tabs: [  { title: '标签1', content: '这是标签1的内容' },  { title: '标签2', content: '这是标签2的内容' },  { title: '标签3', content: '这是标签3的内容' }, { title: '标签5', content: '这是标签1的内容' },  { title: '标签6', content: '这是标签2的内容' },  { title: '标签7', content: '这是标签3的内容' },   // 更多标签数据...  ],  currentIndex: 0, // 当前选中的标签索引,},switchTab(event) {  const index = event.currentTarget.dataset.index;  this.setData({ currentIndex: index });  // 在这里可以添加切换标签后的其他逻辑操作  },  /*** 生命周期函数--监听页面加载*/onLoad(options) {},
} )