uniapp 防抖音demo

uniapp 防抖音demo

<template> 
    <view  class="videoList">
		<swiper vertical duration="200" @change="changed" :style="{height: screenHeight-navBarHeight +'px'}">
		    <block v-for="(item,index) in videoData" :key="index">
				<swiper-item >
				    <video v-if="index==changeIndex" :src="item.url"   
						autoplay="true" :controls="false"   custom-cache="false" loop="false" 
						enable-play-gesture="true" enable-progress-gesture="true" show-center-play-btn="true">
					</video>
					<view class="che" v-if="storeType" @click.stop="shangxiang()">
						<image class="che-left" :src="storeObj.productImage"></image>
						<view class="che-right">
							<view class="che-right-name">
								<text class="che-right-name-text">{{storeObj.productName}}</text>
							</view>
							<view class="che-right-bottom">
								<view class="che-right-bottom-left">
									<text class="che-right-bottom-left-text">￥{{storeObj.productPrice}}</text>
								</view>
								<view class="che-right-bottom-right">
									<text class="che-right-bottom-right-text">购买</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
		    </block>
		</swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {		
				storeObj:[],
                videoData: [],  //视频数据                
				changeIndex: 0 , //控制video是否渲染
				hasMore:false , //是否有更多数据
				pageIndex: 1 ,  //第几页
				showPop:false, //弹窗
				contentPop:'', //弹窗内容
				screenHeight: 0 ,
				statusBarHeight: 0 ,
				navBarHeight: 0,
				storeType:false
            }
        },
		
		onLoad() {
			// 获取系统信息
			wx.getSystemInfo({
			  success: (res) => {
			    this.screenHeight = res.screenHeight
			    this.statusBarHeight = res.statusBarHeight 
			    if (res.system.substring(0, 3) == "iOS") {
			      this.navBarHeight = 42
			    } else {
			      this.navBarHeight = 40
			    }
			  }
			})
			this.getData()
		},
		onShow() {
			this.get()
		},
        methods: {
			//划动切换
			changed(e) {
				let current = e.detail.current  //当前滑块的索引	
				this.changeIndex = current 	 
				if(this.videoData.length == current + 1) {  //当还有1个视频没有看的时候开始加载数据
					this.getData()
				}
				this.getgoods(this.videoData[this.changeIndex])
			},
			getData() {
				uni.request({
					url: 'https://xxxxxxx.com/goodsMaterial/findGoodsVideoRandomList',
					method: 'GET',
					data: {
						num: 10000
					},
					success: async (res) => {
						this.videoData.push(...res.data.data)
						this.pageIndex = this.pageIndex + 1
					}
				})
			},
			get() {
				this.storeObj = [];
				this.videoData = [],  //视频数据                
				this.changeIndex = 0 
				uni.request({
					url: 'https://xxxxxxx.com/goodsMaterial/findGoodsVideoRandomList',
					method: 'GET',
					data: {
						num: 10000
					},
					success: async (res) => {
						this.videoData = res.data.data
						this.pageIndex = this.pageIndex + 1
						this.getgoods(this.videoData[0])
						
					}
				})
			},
			getgoods(dataList){
				if (dataList.spuId || dataList.spuId != null) {
					uni.request({
						url: 'https://xxxxxxx.com/goods/product/' + dataList.spuId,
						method: 'GET',
						success: async (res) => {
							if (res.data.data) {
								this.storeObj = res.data.data
								this.storeType = true
							} else {
								this.storeType = false
							}
						},
						fail: () => {
							this.storeType = false
						}
					})
				} else {
					this.storeType = false
				}
			},		
        }
    }
</script>


<style >
	swiper{
		width:100%;
		background:#000 
	}
	swiper-item{
		height:100%;
		width:100%
	}
	video{
		height:98%;
		width:100%
	}
	.che {
		position: absolute;
		bottom: 130rpx;
		left: 40rpx;
		width: 460rpx;
		height: 200rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #ffffff;
		border-radius: 20rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		z-index: 99999999;
		flex: 1;
	}
	
	.che-left {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	
	.che-right {
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.che-right-name {
		width: 240rpx;
	}
	
	.che-right-name-text {
		color: #000000;
		font-size: 26rpx;
		max-width: 240rpx;
		/* background-color: #39B54A; */
		verflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行 */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 1;
		/* 显示的行数 */
		lines: 1;
	}
	
	.che-right-bottom {
		width: 240rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.che-right-bottom-left-text {
		color: red;
		font-size: 26rpx;
	}
	
	.che-right-bottom-right {
		width: 90rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F81E19;
		border-radius: 10rpx;
	}
	
	.che-right-bottom-right-text {
		color: #ffffff;
		font-size: 22rpx;
	}
</style>