微信小程序手写滑动tab

矢目2023-11-23 9:08

微信小程序手写滑动tab

index.wxml

javascript 复制代码

<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

javascript 复制代码

.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

javascript 复制代码

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) {
  
	},
} )

注：简单记录一下，方便开发查找