android滑块选tab,「小程序UI教程」小程序滑动选择tab-view

功能

可以来回滑动得tab-view功能，小程序实现

在android ios 平台测试过，确保真实环境一致

「小程序UI教程」小程序滑动选择tab-view

小程序滑动选择tab-view

如何使用

复制page下的文件夹到自己项目中

配置app.json

具体教程查看解压包demo导入说明

index.wxml"{{index}}" bindtap="handlerTabTap" class="tab {{activeTab==index?"tab-active":""}}" style="width: {{stv.windowWidth/tabs.length}}px">

{{item}}

这是第{{index+1}}个页面

index.wxss.stv-container {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.withAnimate {

transition: all 100ms ease;

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

}

.stv-container .tab-bar {

position: relative;

display: flex;

font-size: 30rpx;

color: #666666;

}

.stv-container .tab-bar .tab-active {

color: #2d80ff;

}

.stv-container .tab-bar .tab {

display: flex;

align-items: center;

justify-content: center;

padding-top: 16rpx;

padding-bottom: 20rpx;

}

.stv-container .tab-bar .under-line {

position: absolute;

bottom: 0;

height: 6rpx;

background-color: #2d80ff;

}

.stv-container .scroll-view {

position: relative;

width: 100%;

height: 100%;

background: #e7eaef;

}

.stv-container .scroll-view .scroll-view-wrapper {

position: absolute;

top: 0;

bottom: 0;

display: flex;

}

.stv-container .scroll-view .scroll-view-wrapper .one-scene {

height: 100%;

}

.one-scene text {

display: flex;

justify-content: center;

padding-top: 200rpx;

}

作者 | 时期 | 蚂蚁开源社区大神，资深开发工程师

点击了解更多-演示/下载demo源码!