appApplet/components/swiper-tab/swiper-tab-slide.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>