前言

产品拿着某个app的页面来找到我说：”做一个和她这一样湿滑的Tab栏效果”，我当时像敲死ta。但是咱毕竟是程序员么，前端程序员，于是乎就有了下面这个通过scroll-view+swiper相结合的组装出的tab效果。

一、快速开始

需要了解scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。微信小程序官网介绍scroll-view
需要了解swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。官网介绍
swiper-item：仅可放置在swiper组件中，宽高自动设置为100%。官网介绍

二、实战

通过配置 .js、wxml、wxcss

1.在index.js

 data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'), navData: [{text: '孕产妇'},{text: '婴幼儿'},{text: '中老年人'},{{text: '传染病'},{text: '精神病'},{text: '职业病'},{text: '老年病'},{text: '疾病'}],currentTab: 0,navScrollLeft: 0,windowWidth: wx.getSystemInfoSync().windowWidth,  list: [{ title: " 啊实打实大所大所多", img: "最新！新增确诊病例59例，其中本土50例" },{ title: " 阿萨大师大大", img: "" },]},//事件处理函数onLoad: function () {var that = this;//  高度自适应 wx.getSystemInfo({success: function (res) {var clientHeight = res.windowHeight,clientWidth = res.windowWidth, rpxR = 750 / clientWidth;var calc = clientHeight * rpxR - 180;console.log(calc)  that.setData({winHeight: calc});}});  },switchNav(event) {var cur = event.currentTarget.dataset.current;//每个tab选项宽度占1/5var singleNavWidth = this.data.windowWidth / 5;//tab选项居中                            this.setData({navScrollLeft: (cur - 2) * singleNavWidth})if (this.data.currentTab == cur) {return false;} else {this.setData({currentTab: cur})}}, switchTab(event) {console.log(event);var cur = event.detail.current; var singleNavWidth = this.data.windowWidth / 5;console.log(cur, "----", singleNavWidth, "----", (cur - 2) * singleNavWidth);this.setData({  currentTab: cur,navScrollLeft: (cur - 2) * singleNavWidth});this.checkCor();}, //判断当前滚动超过一屏时，设置tab标题滚动条。checkCor: function () {if (this.data.currentTab > 4) {this.setData({   scrollLeft: 300})} else {this.setData({  scrollLeft: 0})}},

2.在index.wxcss

page {width: 100%;height: 100%;background-color: #F2F2F2;
}
.container {width: 100%;height: 100%;
}
.listPar {position: fixed;height: 96rpx;width: 100%;z-index: 2;
}.more {position: absolute;width: 120rpx;height: 96rpx;line-height: 96rpx;z-index: 100;left: 84%;/* background-color: linear-gradient( white 90%, 30% ,#ffffff88 10%); */background: linear-gradient(to left top, white 20%, rgba(255, 255, 255, 0.8) 80%);/* background-color: fuchsia; */text-align
}.moreImg {width: 32rpx;height: 32rpx;
}.nav {padding-right: 85rpx;position: absolute;height: 96rpx;width: 100%;box-sizing: border-box;overflow: hidden;line-height: 96rpx;background: white;font-size: 16px;white-space: nowrap;top: 0;left: 0;z-index: 99;
}.nav-item {margin: 0rpx 34rpx;display: inline-block;text-align: center;line-height: 86rpx;font-size: 28rpx;font-weight: 400;color: #999999;
}.nav-item.active {font-size: 32rpx;font-weight: 500;color: #316CEC;
}
.nav-line {margin: 0rpx 20rpx;height: 0px;
}.nav-line.active {height: 4rpx;background: #316CEC;border-radius: 8px;
}
.nav-item.active:after {content: "";display: block;position: absolute;bottom: 0;left: 5rpx;border-radius: 16rpx;
}
.tab-box {background: #F2F2F2;height: 100%;box-sizing: border-box;
}
.tab-content {overflow-y: scroll;
}
.listBg {margin: 106rpx 32rpx;background-color: white;display: flex;flex-direction: column;
}
.itemImg {height: 320rpx;width: 100%;
}.itemTitle {margin: 24rpx;font-size: 28rpx;font-weight: 500;line-height: 48rpx;color: #333333;
}

3.在 index.wxml

<view class="container"> <view class="listPar"><scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"  show-scrollbar="false" enhanced="true"><block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" bindtap="switchNav"><view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav"><view>{{navItem.text}}</view><view class="nav-line {{currentTab == idx ?'active':''}}"></view></view></block></scroll-view><navigator class="more" bindtap="moreTab" url="./more"><image class="moreImg" src="../../../image/icon8.png"></image></navigator></view> <!-- 页面内容 --><swiper class="tab-box" current="{{currentTab}}" duration="200" bindchange="switchTab"><swiper-item wx:for="{{navData}}" wx:for-item="navItem" wx:for-index="idx" wx:key="idx" class="tab-content"><navigator class="listBg" wx:for="{{list}}" wx:key="index" url="./detailed"><image wx:if="{{item.img}}" class="itemImg" src="../../../image/icon17.png"></image><text class="itemTitle">{{item.title}}</text></navigator></swiper-item></swiper>
</view>

3.效果

使用微信扫一扫查看效果

【微信扫一扫】

微信小程序丝滑的tab栏相关推荐

微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
顺畅操作：教你微信小程序左滑实现更多功能
前言当你在使用微信小程序时,是否曾经遇到过左滑操作是如此的顺畅,让你想起了 iPhone 上的滑动操作?左滑操作在微信小程序中已经成为了一个常见的交互方式,它能够帮助用户快速地执行某些操作,提高了用 ...
解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

微信小程序丝滑的tab栏

前言

一、快速开始

二、实战

1.在index.js

2.在index.wxcss

3.在 index.wxml

3.效果

微信小程序丝滑的tab栏相关推荐

最新文章

热门文章