<template>
	<view>
	<swiper class="swiperitem"
	:indicator-dots="indicatorDots" :autoplay="autoplay"  :interval="interval" :duration="duration">
		<block v-for="(item,index) in slidelist" :key="index">
			<swiper-item class="swiper-item" style="grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 100%">
				<block v-for="(list,indexlist) in item.list" :key="indexlist">
					<view class="viewbox" @click="onClick(list)">
						<view class="swiperimg">
							<image style="height:112rpx" mode="heightFix" lazy-load :src="list.thumb"></image>
						</view>
						<view>
							<view class="swipertitle size10"><text>{{list.title}}</text></view>
						</view>
					</view>
				</block>
			</swiper-item>
		</block>
		
	</swiper>
	</view>
</template>

<script>
	/*简单的可滑动宫格组件，QQ46708420*/
	export default {
		data() {
            return {
        
            }
        },
		props: {
			indicatorDots: {
				type: [Boolean],
				default: true
			},
			//只需要设置宫高总高度，再设置行列比例，宫格会自动缩放
			autoplay: {
				type: [Boolean],
				default: false
			},
			interval: {
				type: [Number],
				default: 2000
			},
			duration: {
				type: [Number],
				default: 500
			},
			slidelist:null
		},
		computed: {
			
		},
		methods: {
			onClick(item) {
				this.$emit('click',item)
			}
		}
	}
</script>

<style>
	.swiperitem{height: 100%;}
   .swiperitem .swiper-item{display: grid;width: 100%;}
   .swiperitem .viewbox{align-items: center;justify-content: center;text-align: center;display: grid;overflow: hidden;padding: 40rpx 0; box-sizing: border-box;}
   .swiperitem .swiperimg{display: flex;align-items: center;height: 100%;}
   .swiperitem .swipertitle{font-size: 22rpx;overflow: hidden;display: inline-block;color: #333;}
</style>
