465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
|
||
<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
|
||
:data-current="index" @tap.stop="swichNav">
|
||
<text class="tab-bar-title">{{item}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<swiper class="tab-content" :current="currentTab" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
|
||
<swiper-item v-for="(item,index) in tabbar" :key="index">
|
||
<scroll-view scroll-y class="scoll-y">
|
||
<view class="list-view">
|
||
<view v-for="(item, index) in newsList" :key="index"
|
||
class="list-cell list-item"
|
||
:class="[newsList.length - 1 == index ? 'last' : '']"
|
||
hover-class="hover"
|
||
:hover-stay-time="150"
|
||
@tap="detail"
|
||
>
|
||
<view class="cell-title-box" :class="[item.img == 0 ? '' : 'min']">
|
||
<view class="cell-title" :class="[item.img == 0 ? 'pdr0' : '']">{{ item.title }}</view>
|
||
<image :src="'../../static/test/' + item.img + '.jpg'" class="img" v-if="item.img != 0"></image>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="tag" :class="[getLabelCss(item.label)]" v-if="item.label != 0">{{ getLabelText(item.label) }}</text>
|
||
<text class="sub-content">{{ item.source }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!--start 内容部分可直接删除-->
|
||
<!-- <view class="list-view">
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">温故知"心"习近平这些话要牢记</view>
|
||
<view class="img-container">
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/2.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/3.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/4.jpg' class="img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-red">要闻</text>
|
||
<text class="sub-content">央视网新闻</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">美国会表决通过新驻华大使 月底有望赴华</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-blue">朋友都看过</text>
|
||
<text class="sub-content">百科故事大全</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列</view>
|
||
<view class="img-container">
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/1.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/4.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/5.jpg' class="img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-orange">本地资讯</text>
|
||
<text class="sub-content">粤港精英联盟</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">科创板交易系统准备就绪,不存在首批名单</view>
|
||
<view class="sub-title">
|
||
<text class="sub-content">百科故事大全</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">开户大战燎原！加急上线科创板预约开户</view>
|
||
<view class="img-container">
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/1.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/4.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/5.jpg' class="img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="sub-content">粤港精英联盟</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">3.07财经早报┃头条：推进改革开放创新增进民生福祉，促进经济社会持续健康发展促进经济社会持续健康发展</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-green">互联网精英看过</text>
|
||
<text class="sub-content">百科故事大全</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="list-cell list-item" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列</view>
|
||
<view class="img-container">
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/2.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/4.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/3.jpg' class="img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-orange">本地资讯</text>
|
||
<text class="sub-content">粤港精英联盟</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-cell" hover-class="hover" :hover-stay-time="150" @tap="detail">
|
||
<view class="cell-title">触手直播“和平精英”星联赛Jstar夺冠 大热</view>
|
||
<view class="img-container">
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/4.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/1.jpg' class="img"></image>
|
||
</view>
|
||
<view class="cell-img">
|
||
<image src='../../static/images/product/2.jpg' class="img"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="badge b-red">要闻</text>
|
||
<text class="sub-content">粤港精英联盟</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view> -->
|
||
<!--end 内容部分可直接删除-->
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabbar: ["健康", "养生", "生活", "饮食"],
|
||
winHeight: "", //窗口高度
|
||
currentTab: 0, //预设当前项的值
|
||
scrollLeft: 0 ,//tab标题的滚动条位置
|
||
newsList: [
|
||
{
|
||
id:1,
|
||
title: '头发爱出油还有着掉发的问题怎么回事这几个方法教你脱节',
|
||
img: 'toufa',
|
||
source: '中国健康知识网',
|
||
label: 1
|
||
},
|
||
|
||
{
|
||
id:2,
|
||
title: '头发应该怎么养护？',
|
||
img: "toufa2",
|
||
source: '医学教育网',
|
||
label: 1
|
||
},
|
||
{
|
||
id:3,
|
||
title: '亚健康是什么？怎么界定？',
|
||
img: 0,
|
||
source: '医学百科',
|
||
label: 0
|
||
},
|
||
|
||
{
|
||
id:4,
|
||
title: '快春节了学会肘子的这个做法香而不腻春节给家人露一手',
|
||
img: "shiwu",
|
||
source: '中国健康知识网',
|
||
label: 1
|
||
},
|
||
{
|
||
id:5,
|
||
title: '日常饮食几大基本原则',
|
||
img: 0,
|
||
source: '常识',
|
||
label: 2
|
||
},
|
||
{
|
||
id:6,
|
||
title: '整形日益低龄化，人大代表建议禁止未成年人整容',
|
||
img: 1,
|
||
source: '养生网',
|
||
label: 0
|
||
},
|
||
{
|
||
id:7,
|
||
title: '什么是甲状腺炎专家有4种类型可不是发炎那么简略',
|
||
img: 2,
|
||
source: '百科故事大全',
|
||
label: 4
|
||
}
|
||
],
|
||
}
|
||
},
|
||
onLoad: function() {
|
||
let that = this;
|
||
// 高度自适应
|
||
uni.getSystemInfo({
|
||
success: function(res) {
|
||
let calc = res.windowHeight;
|
||
that.winHeight = calc;
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
getLabelText: function(label) {
|
||
return ['', '健康知识', '生活小贴士', '都看过'][label];
|
||
},
|
||
getLabelCss: function(label) {
|
||
return ['', 'b-red', 'b-blue', 'b-orange', 'b-green'][label];
|
||
},
|
||
// 滚动切换标签样式
|
||
switchTab: function(e) {
|
||
let that = this;
|
||
this.currentTab = e.detail.current;
|
||
this.checkCor();
|
||
},
|
||
// 点击标题切换当前页时改变样式
|
||
swichNav: function(e) {
|
||
let cur = e.currentTarget.dataset.current;
|
||
if (this.currentTab == cur) {
|
||
return false;
|
||
} else {
|
||
this.currentTab = cur
|
||
}
|
||
},
|
||
//判断当前滚动超过一屏时，设置tab标题滚动条。
|
||
checkCor: function() {
|
||
if (this.currentTab > 3) {
|
||
//这里距离按实际计算
|
||
this.scrollLeft = 300
|
||
} else {
|
||
this.scrollLeft = 0
|
||
}
|
||
},
|
||
detail(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/medical/newsDetail/newsDetail'
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/*tabbar start*/
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
.tab-view::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-bottom: 1upx solid #eaeef1;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
bottom: 0;
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tab-view {
|
||
width: 100%;
|
||
height: 100upx;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
position:absolute;
|
||
|
||
left: 0;
|
||
z-index: 99;
|
||
background: #fff;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-bar-item {
|
||
padding: 0;
|
||
height: 100upx;
|
||
min-width: 80upx;
|
||
line-height: 100upx;
|
||
margin: 0 28upx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tab-bar-title {
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
font-size: 32upx;
|
||
color: #999;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.active {
|
||
border-bottom: 6upx solid #5677fc;
|
||
}
|
||
|
||
.active .tab-bar-title {
|
||
color: #5677fc !important;
|
||
font-size: 36upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/*tabbar end*/
|
||
.scoll-y {
|
||
height: 100%;
|
||
}
|
||
|
||
/* .list-view {
|
||
margin-top: 100upx;
|
||
width: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
} */
|
||
.list-view {
|
||
margin-top: 100upx;
|
||
width: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* .list-cell {
|
||
padding: 30upx;
|
||
box-sizing: border-box;
|
||
} */
|
||
.list-cell {
|
||
padding: 30upx 32upx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* .cell-title-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
} */
|
||
.cell-title-box {
|
||
position: relative;
|
||
}
|
||
|
||
.min {
|
||
min-height: 90upx;
|
||
}
|
||
/* .cell-title {
|
||
font-size: 36upx;
|
||
line-height: 56upx;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
} */
|
||
.cell-title {
|
||
padding-right: 172upx;
|
||
font-size: 36upx;
|
||
line-height: 56upx;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
.img-container {
|
||
width: 100%;
|
||
padding-top: 24upx;
|
||
display: flex;
|
||
height: 160upx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cell-img {
|
||
width: 32%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* .img {
|
||
width: 100%;
|
||
height: 160upx;
|
||
display: block;
|
||
border-radius: 4upx;
|
||
} */
|
||
|
||
.img{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 6upx;
|
||
width: 146upx;
|
||
height: 146upx;
|
||
border-radius: 4upx;
|
||
}
|
||
|
||
.sub-title {
|
||
padding-top: 24upx;
|
||
font-size: 28upx;
|
||
color: #bcbcbc;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.badge {
|
||
padding: 5upx 10upx;
|
||
font-size: 24upx;
|
||
border-radius: 4upx;
|
||
margin-right: 20upx;
|
||
}
|
||
|
||
.b-red {
|
||
background: #FCEBEF;
|
||
color: #8A5966;
|
||
}
|
||
|
||
.b-blue {
|
||
background: #ECF6FD;
|
||
color: #4DABEB;
|
||
}
|
||
|
||
.b-orange {
|
||
background: #FEF5EB;
|
||
color: #FAA851
|
||
}
|
||
|
||
.b-green {
|
||
background: #E8F6E8;
|
||
color: #44CF85
|
||
}
|
||
.tag {
|
||
padding: 5upx 10upx;
|
||
font-size: 24upx;
|
||
border-radius: 4upx;
|
||
margin-right: 20upx;
|
||
}
|
||
</style>
|