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