147 lines
3.1 KiB
Vue
147 lines
3.1 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" >
|
|
<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> |