查看: 1565|回复: 3

[UI模板] 小程序可滑动得tab-view

[复制链接]
发表于 2019-9-19 14:52:38 | 显示全部楼层 |阅读模式
7.jpg

 功能

  可滑动得tab-view功能,小程序实现

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

  小程序目前不支持组件化;后期会抽离一些公共的东西,让使用起来更加方便

小程序可滑动得tab-view

小程序可滑动得tab-view

如何使用

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

配置app.json

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


  1. <view class="stv-container">
  2.   <view class="tab-bar">
  3.     <view wx:for="{{tabs}}" wx:key="unique" data-index=
  4.     "{{index}}" bindtap="handlerTabTap" class="tab {{activeTab==index?'tab-active':''}}" style="width: {{stv.windowWidth/tabs.length}}px">
  5.       <text>{{item}}</text>
  6.     </view>
  7.     <view style="width: {{stv.lineWidth}}px; left: {{stv.offset/tabs.length}}px" class="under-line {{!stv.tStart? 'withAnimate': ''}}"></view>
  8.   </view>
  9.   <view class="scroll-view">
  10.     <view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd"  class="scroll-view-wrapper {{!stv.tStart? 'withAnimate': ''}}" style="left: -{{stv.offset}}px">
  11.       <view style="width: {{stv.windowWidth}}px;" wx:for="{{tabs}}" wx:key="unique" class="one-scene">
  12.         <scroll-view style="height:100%" scroll-y>
  13.           <view wx:for="1234567777777" wx:key="unique">
  14.             <text>这是第{{index+1}}个页面</text>
  15.           </view>
  16.         </scroll-view>
  17.       </view>
  18.     </view>
  19.   </view>
  20. </view>
复制代码

index.wxss

  1. .stv-container {
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   right: 0;
  6.   bottom: 0;
  7. }
  8. .withAnimate {
  9.   transition: all 100ms ease;
  10.   -webkit-transform: translate3d(0, 0, 0);
  11.   -moz-transform: translate3d(0, 0, 0);
  12.   -ms-transform: translate3d(0, 0, 0);
  13.   transform: translate3d(0, 0, 0);
  14.   -webkit-backface-visibility: hidden;
  15.   -moz-backface-visibility: hidden;
  16.   -ms-backface-visibility: hidden;
  17.   backface-visibility: hidden;
  18.   -webkit-perspective: 1000;
  19.   -moz-perspective: 1000;
  20.   -ms-perspective: 1000;
  21.   perspective: 1000;
  22. }
  23. .stv-container .tab-bar {
  24.   position: relative;
  25.   display: flex;
  26.   font-size: 30rpx;
  27.   color: #666666;
  28. }
  29. .stv-container .tab-bar .tab-active {
  30.   color: #2d80ff;
  31. }
  32. .stv-container .tab-bar .tab {
  33.   display: flex;
  34.   align-items: center;
  35.   justify-content: center;
  36.   padding-top: 16rpx;
  37.   padding-bottom: 20rpx;
  38. }
  39. .stv-container .tab-bar .under-line {
  40.   position: absolute;
  41.   bottom: 0;
  42.   height: 6rpx;
  43.   background-color: #2d80ff;
  44. }
  45. .stv-container .scroll-view {
  46.   position: relative;
  47.   width: 100%;
  48.   height: 100%;
  49.   background: #e7eaef;
  50. }
  51. .stv-container .scroll-view .scroll-view-wrapper {
  52.   position: absolute;
  53.   top: 0;
  54.   bottom: 0;
  55.   display: flex;
  56. }
  57. .stv-container .scroll-view .scroll-view-wrapper .one-scene {
  58.   height: 100%;
  59. }
  60. .one-scene text {
  61.   display: flex;
  62.   justify-content: center;
  63.   padding-top: 200rpx;
  64. }
复制代码


      demo下载


游客,如果您要下载源码或者查看隐藏内容请回复




7.jpg
回复

使用道具 举报

发表于 2019-9-20 09:05:38 | 显示全部楼层
感谢分享 学习一下
回复 支持 反对

使用道具 举报

发表于 5 天前 | 显示全部楼层
感谢分享 学习一下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表