109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
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" @animationfinish="animationfinish">
|
||
|
|
<swiper-item class="swiper-item">
|
||
|
|
<scroll-view scroll-y style="height: 100%;width: 100%;" class="list">
|
||
|
|
<view v-for="(item, index) in 5" :key="index">
|
||
|
|
<ContentItem :cur="current" :delItem="showPopup"></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 5" :key="index">
|
||
|
|
<ContentItem :cur="current" :delItem="showPopup"></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: '视频'
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
ContentItem
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showPopup() {
|
||
|
|
this.show = true;
|
||
|
|
},
|
||
|
|
tabsChange(index) {
|
||
|
|
this.swiperCurrent = index;
|
||
|
|
},
|
||
|
|
animationfinish(e) {
|
||
|
|
let current = e.detail.current;
|
||
|
|
// this.$refs.uTabs.setFinishCurrent(current);
|
||
|
|
this.swiperCurrent = current;
|
||
|
|
this.current = current;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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>
|