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>
|