微信小程序手写滑动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) {},
} )
注:简单记录一下,方便开发查找