在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率，我们也应该合理的进行运用.
首先我们是对手机的状态栏的代码进行了自定义。
其次就是采用组件库的van-sticky进行吸顶距离计算
最后右侧的图标和tab采用的是flex进行布局，因为vant的tab不能很好的实现效果，主要是样式不好调，所以我们得重新书写代码。完成对应的效果图。
<nav-bar-2 navTitle="历史任务单" isShow="{{true}}"></nav-bar-2><view style="height:40px; padding: 5px 10px;"></view><view class="search-bar-area" style="margin-top:{{navigationBarAndStatusBarHeight}}px;"><view class="search-bar"><van-search value="{{ value }}" shape="round" background="#1e90ff" placeholder="请输入搜索关键词" /></view></view><view style="margin-top: {{navigationBarAndStatusBarHeight}}px;"><van-sticky offset-top="{{ navigationBarAndStatusBarHeight+40+10 }}"><view class="fx"><view class="navBar"><block wx:for="{{tabs}}" wx:key="item" class="navbaritem"><view id="{{index}}" class="navItem {{tabIndex == index ? 'active' : '' }}" bindtap="onTabClick"><view class="navItemTitle">{{item}}</view></view></block></view><view class="saixuan"><van-icon name="filter-o" style="font-size: 60rpx;"/></view></view></van-sticky><!-- 内容区域 --><view class="content_wrapper"><!-- 第一个tab --><block wx:if="{{tabIndex == 0}}"><view class="top1"><view class="zhengti"><view class="fc"><text class="fontsize">hello鑫亿建材经营部</text><text>PCCD0401- 0017</text></view><view><text class="font">配送中</text></view></view><view class="neibu"><view class="fx"><view class="fontsize size">冀东42.5R水泥</view><view class="fontsize size">500.54t</view></view><view>开始供货：-07-27 15:30:30</view><view class="fx"><view>采购人：李勇</view><view>-07-27 15:30:30</view></view></view><view class="neibu fx"><view class="bar1"><view class="fontsize size">0.00 t / 0车</view><view class="bar"><view class="barmiddle">0%</view></view></view><view class="fx1"><view class="fontsize">收料单</view><van-icon name="arrow" /></view></view></view></block><!-- 第二个tab --><block wx:if="{{tabIndex == 1}}"><view>活动页面</view></block><!-- 第三个tab --><block wx:if="{{tabIndex == 2}}"><view>附近页面</view></block></view></view>
下面是css样式
.navBar {display: flex;justify-content: flex-start;width: 100rpx;height: 100rpx;position: relative;background: #fff;width: 90%;text-align: center;}.navItem {display: flex;align-items: center;justify-content: center;border-bottom: 4rpx solid transparent;margin-left: 30rpx;}.active {color: blue;border-bottom: 2rpx solid blue;}.content_wrapper{flex: 1;}.navItemTitle{width: 100rpx;font-size: 35rpx;}page{background-color: rgb(240, 244, 247);}.fixed{position: fixed;width: 90%;z-index: 100;}.head{height: 40px;background-color: rgb(25, 158, 216);padding: 20rpx;}page{background-color: rgb(240, 244, 247);}.fx{display: flex;justify-content: space-between;}.fxwidth{width: 90%;}.saixuan{width: 10%;height: 100rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;border-left: 2rpx solid #ccc;}.van-tab{flex: none!important;padding-left: 30rpx !important;}.van-tabs__line{width: 40rpx!important;}.top{margin-top: 20rpx;}.top1{margin-top: 20rpx;background-color: white;}.zhengti{padding-left: 20rpx;padding-top: 20rpx;padding-right: 40rpx;padding-bottom: 10rpx;background-color: #fff;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(163, 153, 153);}.fc{display: flex;flex-direction: column;}.font{color: green;}.fontsize{font-weight: 700;}.neibu{padding-top: 10rpx;padding-left: 20rpx;padding-right: 20rpx;padding-bottom: 20rpx;}.size{font-size: 35rpx;}.bar{height: 40rpx;background-color: #ccc;border-radius: 20rpx;position: relative;}.bar1{width: 80%;}.fx1{display: flex;align-items: center;justify-content: space-between;}.barmiddle{position: absolute;left: 50%;}.search-bar-area{position: fixed;width: 100%;z-index: 98;top:0;left:0;}.search-bar{/*bar固定高度40px*/height: 40px;padding: 5px 10px;background: rgb(25, 158, 216);}
import {useGetNavBarInfo} from "../../hooks/index";Page({/*** 页面的初始数据* tabs:tab栏的栏目名* tabIndex:当前tab所在的index*/data: {tabs: ['全部', '配送中', '已完成'],tabIndex: 0,navigationBarAndStatusBarHeight:''},// 处理点击tabonTabClick(e) {let id = e.currentTarget.id;this.setData({tabIndex: id,})},async onLoad(options) {let that = this;let {navigationBarAndStatusBarHeight} = await useGetNavBarInfo();this.setData({navigationBarAndStatusBarHeight,screenHeight: wx.getStorageSync('screenHeight')});},})
引入对应的组件库，自定义状态栏
{
“navigationStyle”: “custom”,
“usingComponents”: {
“nav-bar-2”: “/base-ui/nav-bar-2/index”,
“van-search”: “@vant/weapp/search/index”,
“van-tab”: “@vant/weapp/tab/index”,
“van-tabs”: “@vant/weapp/tabs/index”,
“van-icon”: “@vant/weapp/icon/index”,
“van-sticky”: “@vant/weapp/sticky/index”
}
}
滑动切换
<view class="swiper-tab"><view class="flex"> <view class="swiper-tab-item {{currentTab == 0 ? 'swiper-tab-item-active' : ''}}" data-current="0" bindtap="changeSwiperTab">详情信息</view><view class="swiper-tab-item {{currentTab == 1 ? 'swiper-tab-item-active' : ''}}" data-current="1" bindtap="changeSwiperTab">发货记录</view></view><view class="flex" style="align-items: center;justify-content: center;"><van-icon name="plus" style="color: #ccc;"/><view class="padding-right-10" style="color: rgb(16, 83, 230);">复制新增</view></view></view><swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"><swiper-item>页面一内容</swiper-item><swiper-item>页面二内容</swiper-item></swiper>
.swiper-tab {background-color: #fff;padding-top: 10rpx;display: flex;justify-content: space-between;}.swiper-tab-item {padding: 15rpx;margin-left: 20rpx;}.swiper-tab-item-active {border-bottom: rgb(8, 70, 240) 2px solid;color: rgb(8, 70, 240) ;}
changeSwiperTab: function (e) {var _this = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {_this.setData({currentTab: e.target.dataset.current})}},/*** 滑动选项卡切换*/swiperTab: function (e) {var _this = this;_this.setData({currentTab: e.detail.current})},
如果觉得《微信小程序实现tab切换和吸顶效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
