微信小程序实现顶部tab切换

2024-10-14 02:02:40

1、打开开发者工具,新建项目在项目的pages文件夹下创建一个mypage文件夹,并在文件夹内新建mypage,在app.json中将mypage设为第一页面

微信小程序实现顶部tab切换

3、在mypage.wxss中添加代码如下:.outter{display: flex挢旗扦渌;width: 100%;justif烤恤鹇灭y-content: center;border-bottom: 2rpx solid black}.slid-item{margin-left: 20rpx;margin-right: 20rpx;}.on{border-bottom: 3rpx solid red;}

微信小程序实现顶部tab切换

5、编译代码,在左侧模拟器查看效果,基本实现了要求,下一步动态更改选中的currentid

微信小程序实现顶部tab切换

7、编译运行,在左侧模拟器切换tab会发现标签下的红色底边框跟随切换

微信小程序实现顶部tab切换
猜你喜欢