网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容 知识问答

微信小程序实现顶部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切换
© 2025 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com