【小程序UI教程】小程序滑動選擇tab-view

• 2019 年 10 月 6 日
• 筆記

功能

可以來回滑動得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;  }

作者 | 時期 | 螞蟻開源社區大神，資深開發工程師