133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
|
|||
|
|
<block slot="backText">返回</block>
|
|||
|
|
<block slot="content">视频中心</block>
|
|||
|
|
</cu-custom>
|
|||
|
|
<view class="top-fixed">
|
|||
|
|
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
|
|||
|
|
<view class="flex text-center">
|
|||
|
|
<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
|
|||
|
|
{{tabNav[index]}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="line"></view>
|
|||
|
|
</view>
|
|||
|
|
<block v-if="TabCur==0">
|
|||
|
|
<scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
|
|||
|
|
<view class="">
|
|||
|
|
<view class="cu-card case">
|
|||
|
|
<view class="cu-item shadow">
|
|||
|
|
<view class="image">
|
|||
|
|
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
<view class="cu-bar bg-shadeBottom">
|
|||
|
|
<text class="text-cut">视频标题文字</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-card case">
|
|||
|
|
<view class="cu-item shadow">
|
|||
|
|
<view class="image">
|
|||
|
|
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
<view class="cu-bar bg-shadeBottom">
|
|||
|
|
<text class="text-cut">视频标题文字</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-tabbar-height"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</block>
|
|||
|
|
<block v-if="TabCur==1">
|
|||
|
|
<scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
|
|||
|
|
12331
|
|||
|
|
<view class="cu-tabbar-height"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
basePath
|
|||
|
|
} from '@/common/tool.js';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
sTop:0,
|
|||
|
|
totalHeight:0,
|
|||
|
|
TabCur: 0,
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
tabNav: ['平台视频', '企业视频'],
|
|||
|
|
noClick:true,
|
|||
|
|
list: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(e){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.getData();
|
|||
|
|
let that=this;
|
|||
|
|
let CustomBar = this.CustomBar;
|
|||
|
|
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
|
|||
|
|
success(res) { //成功回调函数
|
|||
|
|
let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
|
|||
|
|
titleH.boundingClientRect(data=>{
|
|||
|
|
that._data.sTop=data.height //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
|
|||
|
|
that.totalHeight = data.height+CustomBar
|
|||
|
|
}).exec()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
tabSelect(e) {
|
|||
|
|
this.TabCur = e.currentTarget.dataset.id;
|
|||
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
|||
|
|
},
|
|||
|
|
getData() {
|
|||
|
|
var _this = this;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '请稍候'
|
|||
|
|
})
|
|||
|
|
uni.request({
|
|||
|
|
url: basePath + '/app/notice/list',
|
|||
|
|
method: 'POST',
|
|||
|
|
dataType: 'json',
|
|||
|
|
header: {
|
|||
|
|
'Content-type':'application/x-www-form-urlencoded'
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
if("success" == res.data.result){
|
|||
|
|
uni.hideLoading();
|
|||
|
|
_this.list = res.data.varList;
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.data.message,
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//跳转事件
|
|||
|
|
goToDetail(e) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/news/news-list-detail?id='+e
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|