【小程序UI教程】小程序滑动选择tab-view

用户5997198

发布于 2019-09-20 08:22:51

96500

代码可运行

文章被收录于专栏：蚂蚁开源社区蚂蚁开源社区

运行总次数：0

代码可运行

功能

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

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

如何使用

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

配置app.json

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

index.wxml

<view class="stv-container">
  <view class="tab-bar">
    <view wx:for="{{tabs}}" wx:key="unique" data-index=
    "{{index}}" bindtap="handlerTabTap" class="tab {{activeTab==index?'tab-active':''}}" style="width: {{stv.windowWidth/tabs.length}}px">
      <text>{{item}}</text>
    </view>
    <view style="width: {{stv.lineWidth}}px; left: {{stv.offset/tabs.length}}px" class="under-line {{!stv.tStart? 'withAnimate': ''}}"></view>
  </view>
  <view class="scroll-view">
    <view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd"  class="scroll-view-wrapper {{!stv.tStart? 'withAnimate': ''}}" style="left: -{{stv.offset}}px">
      <view style="width: {{stv.windowWidth}}px;" wx:for="{{tabs}}" wx:key="unique" class="one-scene">
        <scroll-view style="height:100%" scroll-y>
          <view wx:for="1234567777777" wx:key="unique">
            <text>这是第{{index+1}}个页面</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

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;
}