目录
前言
产品拿着某个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/5
var 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.效果
使用微信扫一扫查看效果
【微信扫一扫】