2020-08-26【uni-app】scroll-view选项卡

<template>
      <!-- content -->
  <view class="point_content">

    <!-- tabMenu -->
    <view class="tabMenu whiteBg">
      <scroll-view class="scroll-view_H" scroll-x="true"  show-scrollbar="false" :scroll-into-view="scrollId">
          <view class="tab_list" :class="{'actived' : tabIndex == index}" v-for="(item,index) in tabList" :key="index" :id="'t' + item.id" @click="tabClick(index,item.id)">{{item.name}}</view>
      </scroll-view>
    </view>
    <!-- tabMenu end-->

    <!-- 使用 swiper 配合 滑动切换 -->
    <view class="tabContent padding whiteBg">
      <swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" :duration="300" @change="tabChange">
        <swiper-item v-for="(item,index) in listContent" :key="index">
          <scroll-view scroll-y >
            <!-- 暂无数据 -->
            <view v-if="item.list.length <= 0" class="no_data_box">
              <image src="../../static/no_data.png" mode="" class="no_data"></image>
              <view>暂无数据</view>
            </view>
            <!-- 暂无数据 end -->

            <view class="tab_ul" v-else>

              <view class="tab_li" v-for="(it2,in2) in item.list" :key="in2">
                <image :src="it2.img" mode="" class="li_img" />
                <view class="li_line padding">
                  <view class="li_title">{{it2.title}}</view>
                  <view class="li_integral">{{it2.integral}}积分</view>
                </view>
              </view>

              

              

            </view>
          </scroll-view>

        </swiper-item>
      </swiper>
    </view>
    
    <!-- 使用 swiper 配合 滑动切换 end-->

  </view>
  <!-- content end-->







</template>

<script>
    data(){
        return{
              tabList:[
                {id:1, name:'全部'},
                {id:2, name:'1-99'},
                {id:3, name:'100-499'},
                {id:4, name:'500-2999'},
                {id:5, name:'3000以上'},
          ],
          tabIndex:0,
          scrollId:'', // 锚点链接
          swiperheight:500, // swiper高度
          listContent:[
            {
              list:[
                  { id:1, img:'../../static/code_img.jpg', title:'奈雪的茶30元抵用券', integral:30, },
                  { id:2, img:'../../static/code_img.jpg', title:'小熊的茶30元抵用券', integral:30, },
                  { id:3, img:'../../static/code_img.jpg', title:'coco30元抵用券', integral:30, },
        
              ],
            },
            {
              list:[],
            },
            {
              list:[
                 { id:1, img:'../../static/ren_img.png', title:'奈雪的茶30元抵用券', integral:30, },
                { id:2, img:'../../static/ren_img.png', title:'小熊的茶30元抵用券', integral:30, },
                { id:3, img:'../../static/ren_img.png', title:'coco30元抵用券', integral:30, },
              ],
            },
            {
              list:[
                { id:1, img:'../../static/avatar.png', title:'奈雪的茶30元抵用券', integral:30, },
                { id:2, img:'../../static/avatar.png', title:'小熊的茶30元抵用券', integral:30, },
                { id:4, img:'../../static/avatar.png', title:'coco30元抵用券', integral:30, },
              ],
            },
            {
              list:[
                { id:1, img:'../../static/logo.png', title:'奈雪的茶30元抵用券', integral:30, },
                { id:2, img:'../../static/logo.png', title:'小熊的茶30元抵用券', integral:30, },
                { id:4, img:'../../static/logo.png', title:'coco30元抵用券', integral:30, },
              ],
            },
          ]
        },
        methods(){
            tabClick(index,id){
				this.tabIndex = index;
				this.scrollId = 't' + id;
			},
            
            tabChange(e){
				console.log(e)
				var index = e.target.current;
				this.tabIndex = index;
				this.scrollId = 't' + this.tabList[index].id
			}
        }
    }
</script>

.tabMenu{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.tab_list{
  display: inline-block;
  padding: 20rpx;
  text-align: center;
  box-sizing: border-box;
}
.actived{
  color: #3A6EFA;
  border-bottom: 2px solid #3A6EFA;
}
.tabContent{
  
}
.tab_ul{
  display: flex;
  flex-wrap: wrap;
  height: 1000rpx;
  overflow-y: scroll;
}
.tab_ul>view{
  width: 47%;
  margin-bottom: 30rpx;
}
.tab_ul>view:nth-child(odd){
  margin-right: 30rpx;
}

.tab_ul .li_img{
  width: 100%;
  height: 300rpx;
  display: block;
  border: 1px solid #eee;

}
.li_title{
  line-height: 2;
  width: 100%;
  overflow: hidden;
  text-overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}