小程序顶部navbar(非Slider)
wxml(该导航栏的实现原理是当你要显示哪个view在最前端的时候隐藏其他的view):
<!-- 顶部navbar导航栏 --> <view class="navbar"> <text wx:for="{{navbar}}" data-index="{{index}}" class="item{{currentIndex==index?'active':''}}" bindtap="navbarTab" wx:key="unique">{{item}}</text> </view> <view hidden="{{currentIndex!==0}}" class='box'> <text>我是第一个view</text> </view> <view hidden="{{currentIndex!==1}}" class='box'> <text>我是第一个view</text> </view> <view hidden="{{currentIndex!==2}}" class='box'> <text>我是第一个view</text> </view>
js(根据不同的需求,data里面navbar的值和个数可以按需修改):
Page({ data: { navbar: ["进行中", "成功", "失败"], currentIndex: 0, status: false, }, // navbar切换 navbarTab: function (e) { this.setData({ currentIndex: e.currentTarget.dataset.index }); } })
wxss(因为navbar的高度为70rpx,故box的margin-top需为70rpx):
.navbar { display: flex; width: 100%; flex-direction: row; line-height: 70rpx; overflow: auto; position: fixed; top: 0; } .navbar .item { flex: auto; font-size: 30rpx; text-align: center; background: #fff; color: #888; } .navbar .item.active { color: #09bb07; position: relative; } .navbar .item.active::after { content: ""; display: block; position: absolute; height: 4rpx; bottom: 0; left: 0; right: 0; background: #09bb07; } .navbar:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #e5e5e5; color: #e5e5e5; } .box { margin-top: 70rpx; background-color: #f8f8f8; padding: 0; justify-content: space-between; box-sizing: border-box; flex-direction: column; display: flex; }