109 lines
4.4 KiB
Vue
109 lines
4.4 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="posi-sticky">
|
|||
|
|
<scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide>
|
|||
|
|
</view>
|
|||
|
|
<swiper :style="{height: swiperHeight-100 + '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="/static/del/500478055.png" 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,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
tabTap(e) {
|
|||
|
|
this.activeIndex = e;
|
|||
|
|
},
|
|||
|
|
swiperChange(e) {
|
|||
|
|
this.activeIndex = e.detail.current;
|
|||
|
|
},
|
|||
|
|
scrollBottomEv(e) {
|
|||
|
|
this.$emit('scrollBottom',this.activeIndex)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|