小潘杂谈

微信小程序如何实现顶部普通选项卡非swiper效果的实例

字号+ 作者:admin 来源:seo博客 2020-09-07 13:00 我要评论( )

这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果,非swiper,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 背景:前段时间写了一个抢红包小......

这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果,非swiper,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来。

效果图:

微信小程序如何实现顶部普通选项卡非swiper效果的实例

下面直接上代码:

wxml:<view>

wxss:.navbar{display: flex;width: 100%;flex-direction: row;line-height: 80rpx;position: fixed;top: 0; } .navbar .item{flex: auto;font-size: 30rpx;text-align: center;background: #fff;font-weight: bold; } .navbar .item.active{color: #36DB2C;position: relative; } .navbar .item.active::after{content: "";display: block;position: absolute;height: 4rpx;bottom: 0;left: 0;right: 0;background: #36DB2C; }js:data: {navbar: ["我发出的", "我收到的"],currentIndex: 0,//tabbar索引},navbarTab: function (e) {this.setData({currentIndex: e.currentTarget.dataset.index});},以上是实现过程基本代码,省去了中间内容的代码。顶部个数是循环出来的,可以根据自己的实际需求设置。以上就是微信小程序如何实现顶部普通选项卡非swiper效果的实例的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读