微信小程序手写滑动tab

微信小程序手写滑动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) {
  
	},
} ) 

注:简单记录一下,方便开发查找

相关推荐
努力成为包租婆5 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
thinkQuadratic7 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方8 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理10 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机11 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室12 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习14 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建15 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_17 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码2 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php