小程序 tab wepy

<template>
  <view class="container">
    <view class="search"><text>大家都在搜索“口红”</text></view>
    <!-- tab导航栏 -->
    <!-- scroll-left属性可以控制滚动条位置 -->
    <!-- scroll-with-animation滚动添加动画过渡 -->
    <scroll-view
      scroll-x="true"
      class="nav"
      scroll-left="{{scrollLeft}}"
      scroll-with-animation="{{true}}"
    >
      <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
        <view
          class="nav-item {{currentTab == idx ?'active':''}}"
          data-current="{{idx}}"
          bindtap="switchNav"
        >
          <image src="{{navItem.img}}" mode="aspectFill"></image>
          <text>{{navItem.text}}</text> 
        </view>
      </block>
    </scroll-view>
    <!-- 页面内容 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
      <swiper-item
        wx:for="{{videoItems}}"
        wx:for-item="videoItems"
        wx:for-index="idx"
        wx:key="idx"
        class="tab-content"
      >
        <!-- <view wx:for="{{videoItems.videoList}}">
          <view class="wrapper">
            <image
              class="video{{index}}"
              wx:if="{{index!=videoIndex}}"
              mode="aspectFill"
              src="{{item.coverimg}}"
            />
          </view>
        </view> -->
        <view class="listwrap"> 
          <view id="left">
            <block wx:for="{{videoItems.videoList}}" wx:key="wx:key">
              <view>
                <image src="{{item.coverimg}}" mode="widthFix"/>
                   <text class="title">发发送方动脑筋看来</text>
                  <view class="content">
                    <image class="avatar" src="{{item.coverimg}}"/>
                    <view class="text">
                      <text class="subtitle">发的</text>                      
                      <text class="like">111人喜欢</text>                      
                    </view>
                  </view>
              </view>
            </block>
          </view>
          <view id="right">
            <block wx:for="{{videoItems.videoList}}" wx:key="wx:key">
              <view>
                <image src="{{item.coverimg}}" mode="widthFix"/>
                   <text class="title">发发送方动脑筋看来你</text>
                  <view class="content">
                    <image class="avatar" src="{{item.coverimg}}"/>
                    <view class="text">
                      <text class="subtitle">发的</text>                      
                      <text class="like">111人喜欢</text>                      
                    </view>
                  </view>
              </view>
            </block>
          </view>
        </view> 
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import wepy from 'wepy'
export default class Cs extends wepy.page {
  data = {
    userInfo: {},
    hasUserInfo: false,
    videoIndex: null,
    videoItems: [
      {
        child_id: 1,
        praise: 666,
        comment: 111,
        videoList: [
          {
            coverimg:
              'http://img3.imgtn.bdimg.com/it/u=710801204,2976632827&fm=15&gp=0.jpg'
          },
          {
            coverimg:
              'http://img3.imgtn.bdimg.com/it/u=710801204,2976632827&fm=15&gp=0.jpg'
          },
          {
            coverimg:
              'http://img3.imgtn.bdimg.com/it/u=710801204,2976632827&fm=15&gp=0.jpg'
          },
          {
            coverimg:
              'http://img3.imgtn.bdimg.com/it/u=710801204,2976632827&fm=15&gp=0.jpg'
          }
        ]
      },
      {
        child_id: 2,
        videoList: [
          {
            coverimg: 'http://img3.imgtn.bdimg.com/it/u=4200572003,2943818672&fm=26&gp=0.jpg'
          }
        ]
      },
      {
        child_id: 3,
        videoList: [
          {
            coverimg: 'http://img1.imgtn.bdimg.com/it/u=1114960080,3701900879&fm=26&gp=0.jpg'
          }
        ]
      }
      // {
      //   child_id: 4,
      //   videoList: [
      //     {
      //       coverimg:
      //         'http://video.ldtch.com/FkDXOBHdwQGFCc0rqqzMHkuwNTKG'
      //     }
      //   ]
      // },
    ],
    navData: [
      {
        text: '推荐',
        img: '../images/t1.png'
      },
      {
        text: '教程',
        img: '../images/t2.png'
      },
      {
        text: '评测',
        img: '../images/t3.png'
      }
      // {
      //   text: '4'
      // },
    ],
    currentTab: 0,
    scrollLeft: 0,
    windowWidth: 0
  }

  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth
      }
    })
  }

  methods = {
    // 滚动切换
    switchTab(e) {
      this.currentTab = e.detail.current
      //每个tab选项宽度占1/3
      var singleNavWidth = this.windowWidth / 3
      //tab选项居中
      this.scrollLeft = (this.currentTab - 2) * singleNavWidth
    },
    // 点击切换
    switchNav(e) {
      var cur = e.currentTarget.dataset.current
      var singleNavWidth = this.windowWidth / 3
      this.scrollLeft = (cur - 2) * singleNavWidth
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    }
  }
}
</script>

<style lang="scss">

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

.container,
swiper {
  width: 100%;

}

swiper {
  height: 422rpx;
}

swiper-item image {
  width: 100%;
  height: 422rpx;
}

page {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background: white
}
.search{
  position: fixed;
  background: #f7f7f7;
  color: #b3b3b3;
  height: 60rpx;
  line-height: 60rpx;
  box-sizing: border-box;
  width: 690rpx;
  left: 30rpx;
  top: 10rpx;
  border-radius: 20rpx;
  text-indent:24rpx
}
.nav {
  margin-top: 70rpx;
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.nav-item {
  width: 250rpx;
  display: inline-block;
  text-align: center;
  
}
.nav-item image{
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
.nav-item.active {
  color: #d496a1;
}

.tab-content > view {
  padding: 10px;
}

.tab-box {
  padding-top: 140rpx;
  height: 100%;
  box-sizing: border-box;
  .listwrap{
      overflow: hidden;
       #left, #right{
        width: 48%;
        margin: 0 1%;
        float: left;
        }
        #left>image, #right>image{
        width: 100%;
      }
      .content {
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          width: 100%;
          .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .text {
            margin-left: 10px;
            flex: 1;
            display: flex;
            flex-direction: row;
            height: 30px;
            line-height: 30px;
            .title {
              font-size: 14px;
              font-weight: bold;
            }
            .subtitle,.like {
              font-size: 11px;
              color: grey;
              flex: 1
            }
            .like{
              float: right
            }
          }
        }

    }
}

.tab-content {
  overflow-y: scroll;
}
.wrapper {
  position: relative;
  height: 422rpx;
}
.video-video {
  width: 100%;
  height: 400rpx;
}

.video-video2 {
  width: 100%;
  height: 400rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.videoPlay {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  top: 50%;
  left: 50%;
  margin: -30rpx 0 0 -30rpx;
  z-index: 100;
}

video {
  width: 100%;
}

.flexBox {
  display: flex;
}

.floatRight {
  flex: 1;
  padding-top: 24rpx;
}

.floatRight image {
  vertical-align: middle;
  float: right;
}

.floatRight text {
  float: right;
}

.avater {
  width: 50px;
  height: 50px;
  background-color: #eee;
  border-radius: 50%;
  vertical-align: middle;
}

.praise {
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
}

</style>