110 lines
4.5 KiB
Vue
110 lines
4.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="posi-sticky" :style="{top: newTop +'px'}">
|
||
<scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide>
|
||
</view>
|
||
<swiper :style="{height: swiperHeight - 200 + 'px'}" class=" fon30" :current="activeIndex" @change="swiperChange">
|
||
<swiper-item v-for="(item,index) in list.length" :key="index">
|
||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||
<!-- 列表数据 -->
|
||
<view class="radius20 bacf6 disjb pad20 bbot" v-for="(item1,index1) in list[index]" :key="index1">
|
||
<image class="mar-y20 flexs" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 200rpx;height: 200rpx;"></image>
|
||
<view class="width100 disjb fc" style="height: 200rpx;">
|
||
<view>
|
||
<view class="clips2">{{item1.title}}{{index1}}</view>
|
||
<view class="fon24 col9 clips2">{{item1.content}}</view>
|
||
</view>
|
||
<view class="disjbac fon28">
|
||
<view class="colf8 bold">￥{{item1.price}}</view>
|
||
<view class="col5b">销量：{{item1.xiaol}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pad-sx40 col9 tcenter" v-if="ifloading" style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;">加载中...</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||
export default {
|
||
name:"swiper-tab-slide",
|
||
components:{
|
||
scrollTextSlide
|
||
},
|
||
props:{
|
||
ifloading:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
tagList:{
|
||
type:Array,
|
||
default:()=>{
|
||
return ['全部','男士外套','女士','孩童短裤','中年棉衣','老年']
|
||
}
|
||
},
|
||
list:{
|
||
type:Array,
|
||
default:()=>{
|
||
return [
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
// {title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
[
|
||
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||
],
|
||
]
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
activeIndex:0,
|
||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||
newTop:uni.getSystemInfoSync().statusBarHeight + 50
|
||
};
|
||
},
|
||
methods:{
|
||
tabTap(e) {
|
||
this.activeIndex = e;
|
||
},
|
||
swiperChange(e) {
|
||
this.activeIndex = e.detail.current;
|
||
},
|
||
scrollBottomEv(e) {
|
||
this.$emit('scrollBottom',this.activeIndex)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|