demingshangjia/pages/user/content.vue

<template>
	<view class="content">
		<view class="tab-swiper">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" active-color="#FF780F" inactive-color="#333333" font-size="30" gutter="317" height="98" :show-bar="false" swiperWidth="750" :is-scroll="false"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" >
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" class="list">
					<view v-for="(item, index) in newlist" :key="index">
						<ContentItem :info="item" :type="type" del="del"></ContentItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" class="video-list">
					<view v-for="(item, index) in newlist" :key="index">
						<ContentItem :info="item" :type="type" @del="del"></ContentItem>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="show" mode="center">
			<view class="close-popup">
				<view class="tips">确定要删除该视频吗</view>
				<view class="btn">
					<view class="cancel" @click="show=false">取消</view>
					<view class="confirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import ContentItem from '@/components/content-item/index'
export default {
	data() {
		return {
			show: false,
			current: 0,
			swiperCurrent: 0,
			list: [{
				name: '图文'
			}, {
				name: '视频'
			}],
			type:1,
			num:1,
			newlist:[]
		}
	},
	components: {
		ContentItem
	},
	onLoad() {
		this.getlist()
	},
	onReachBottom() {
		this.num++
		this.getlist()
	},
	methods: {
		getlist(){
			let that = this;
			this.$u.api.articlelist({
				type:that.type,
				page:that.num
			}).then(res => {
				console.log(res);
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data.articleList
					for(let index in arr){
						that.newlist.push(arr[index])
					}
				}
			});
			
		},
		del(e) {
			// 删除元素
			this.show=true
			console.log(e)
		},
		tabsChange(index) {
			this.swiperCurrent = index;
			this.type=index+1;
			this.num=0
			this.newlist=[]
			this.getlist()
		},
		animationfinish(e) {
			console.log(12345666)
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
			this.type=current+1;
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	display: flex;
	flex-direction: column;
	> uni-swiper {
		flex: 1;
	}
	.tab-swiper {
		margin: 2rpx 0 20rpx 0;
	}
	.close-popup {
		background:rgba(255,255,255,1);
		border-radius: 10rpx;
		.tips {
			width: 420rpx;
			font-size: 28rpx;
			color: rgba(102,102,102,1);
			text-align: center;
			padding: 38rpx 0;
		}
		.btn {
			width: 420rpx;
			border-top: 2rpx #ECECEC solid;
			display: flex;
			> view {
				font-size: 26rpx;
				flex: 1;
				line-height: 98rpx;
				text-align: center;
			}
			.cancel {
				color: #333333;
				border-right: 2rpx #ECECEC solid;
			}
			.confirm {
				color: #FF780F;
			}
		}
	}
}
</style>