基于vue的分页功能，包括跳转记忆功能等
html:
<!-- -->
<template>
<div class="newsCenter" :style="footer" ref="newsCenter" id="newsCenter">
<div class="bc"></div>
<div class="title f-22-600 p-t-20 t-a-c m-b-20">新闻中心</div>
<div class="tabs">
<div class="tips">
<div class="right">
<div
class="title-item c-pointer"
:class="{active:isActive=='dynamic'}"
@click="toggle('dynamic')"
>公司动态</div>
<div
class="title-item c-pointer"
:class="{active:isActive=='news'}"
@click="toggle('news')"
>行业新闻</div>
</div>
</div>
<div class="content m-t-20">
<div class="item" v-for="item in newList" :key="item.id">
<div class="item-img c-pointer" @click="toDetail(item)">
<img :src="item.pic" alt />
<div class="timeTips">
<span class="day">{{item.dayof}}</span>
<span class="year-m">{{item.day}}</span>
</div>
</div>
<div class="item-right c-pointer" @click="toDetail(item)">
<div class="title">{{item.title}}</div>
<div style="width:50%;height:1px;border-bottom:1px solid #144aaa;"></div>
<!-- <div class="title2">{{item.title2}}</div> -->
<div class="content m-t-20" style="height:66px;box-sizing:border-box;">{{item.content}}</div>
<a
v-show="item.id==38"
class="newh3style"
href="http://www.neeq.com.cn/uploads/1/file/public/202001/20200119201323_vpolqcjhnb.docx"
download="http://www.neeq.com.cn/uploads/1/file/public/202001/20200119201323_vpolqcjhnb.docx"
>全国中小企业股份转让系统股票向不特定合格投资者公开发行保荐业务管理细则（试行）.docx</a>
<a
v-show="item.id==35"
class="newh3style"
href="http://www.neeq.com.cn/uploads/1/file/public/202002/20200214182154_qa5y4tyyd6.docx"
download="http://www.neeq.com.cn/uploads/1/file/public/202002/20200214182154_qa5y4tyyd6.docx"
>全国中小企业股份转让系统股票定向发行临时公告模板.docx</a>
<!-- <div class="content m-t-20">{{item.content2}}</div> -->
<div v-show="item.id!==38 && item.id!==35" class="know m-t-20 c-pointer">
<!-- <div v-if="item.id!=38 || item.id!=35" class="font">{{item.know?item.know:"了解详情"}}</div> -->
<div class="font">{{item.know?item.know:"了解详情"}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="pc">
<div class="pagination m-t-40 m-b-40">
<div class="pag-item tip">
<span>第{{currentPage}}/{{totalPage}}页</span>
</div>
<div class="pag-item first" @click="page('first')" :class="{active:ispage=='first'}">首页</div>
<div class="pag-item prev" @click="prev" :class="{disable:isDisabled=='start'}">上一页</div>
<div class="pag-item next" @click="next" :class="{disable:isDisabled=='end'}">下一页</div>
<div class="pag-item last" @click="page('end')" :class="{active:ispage=='end'}">末页</div>
</div>
</div>
<!-- <a href="#newsCenter"> -->
<div class="toTop" @click="toTop" v-show="topShow">
<img src="../assets/imgs/img/top.png" alt />
</div>
<!-- </a> -->
<div class="wap" style="margin-bottom:20px;text-align:center">
<span @click="lookMore" v-if="showFlag" class="more">查看更多</span>
</div>
<div class="pc">
<Footer></Footer>
</div>
<div class="wap">
<div class="footer">
<Footer></Footer>
</div>
</div>
</div>
</template>
2.js
<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
export default {
components: { Header, Footer },
data() {
return {
footer: {
height: "628px",
},
showFlag: true, //控制查看更多显示隐藏
topShow: false, //回到顶部
totalPage: 1, //几页
currentPage: 1, //当前页
pageSize: 6, //每页显示数量
// currentPageData: [], //当前页显示内容
isDisabled: "", //上一页下一页
ispage: "first", //首末页
timeActive: "2020", //year-新闻
list: [
{
id: 48,
timeId: "2020", //时间
typeId: "news", //新闻咨询
dayof: "14",
day: "2020 - 8",
pic: require("../assets/imgs/news/news48.png"),
title: "全国中小企业股份转让系统投资者适当性管理业务指南",
// title2: "转让系统股票异常交易监控细则（试行）",
content:
"为了保障全国中小企业股份转让系统（以下简称全国股转系统）平稳有序发展，有效控制市场风险，保护投资者合法权益，根据《证券法》《证券公司监督管理条例》《证券期货投资者适当性管理办法》等法律法规，制定本办法。",
// content2: ""
},
{
id: 47,
timeId: "2020", //时间
typeId: "news", //新闻咨询
dayof: "7",
day: "2020 - 8",
pic: require("../assets/imgs/news/news47.png"),
title: "全国中小企业股份转让系统投资者适当性管理办法",
// title2: "转让系统股票异常交易监控细则（试行）",
content:
"为了保障全国中小企业股份转让系统（以下简称全国股转系统）平稳有序发展，有效控制市场风险，保护投资者合法权益，根据《证券法》《证券公司监督管理条例》《证券期货投资者适当性管理办法》等法律法规，制定本办法。",
// content2: ""
},
{
id: 46,
timeId: "2020", //时间
typeId: "news", //公司动态
dayof: "31",
day: "2020 - 7",
pic: require("../assets/imgs/news/news46.jpg"),
title: "全国中小企业股份转让系统分层管理办法",
// title2: "转让系统股票异常交易监控细则（试行）",
content:
"为了完善分层管理，优化市场层级结构，全国中小企业股份转让系统有限责任公司对《全国中小企业股份转让系统挂牌公司分层管理办法》进行了修订，并更名为《全国中小企业股份转让系统分层管理办法》。经中国证监会批准，现予以发布，自发布之日起施行。2017年12月22日发布的《全国中小企业股份转让系统挂牌公司分层管理办法》同时废止。",
// content2: ""
},
{
id: 45,
timeId: "2020", //时间
typeId: "news", //公司动态
dayof: "24",
day: "2020 - 7",
pic: require("../assets/imgs/news/news45.png"),
title:
"全国中小企业股份转让系统挂牌公司股份特定事项协议转让业务办理指南",
// title2: "转让系统股票异常交易监控细则（试行）",
content:
"为了规范全国中小企业股份转让系统（以下简称全国股转系统）挂牌公司股份特定事项协议转让业务，明晰业务受理要求和办理程序，提升工作透明度，根据《全国中小企业股份转让系统挂牌公司股份特定事项协议转让细则》（以下简称《细则》）等有关规定，制定本指南。",
// content2: ""
},
{
id: 44,
timeId: "2020", //时间
typeId: "news", //公司动态
dayof: "17",
day: "2020 - 7",
pic: require("../assets/imgs/news/news44.jpg"),
title: " 全国中小企业股份转让系统股票异常交易监控细则（试行）",
// title2: "转让系统股票异常交易监控细则（试行）",
content:
"为了维护全国中小企业股份转让系统（以下简称全国股转系统）股票交易秩序，保护投资者合法权益，根据《全国中小企业股份转让系统股票交易规则》（以下简称《交易规则》）,《全国中小企业股份转让系统主办券商管理办法（试行）》等规定，制定本细则。",
// content2: ""
},
{
id: 43,
dayof: "10",
day: "2020 - 7",
timeId: "2020", //时间
typeId: "news", //公司动态
pic: require("../assets/imgs/news/news43.jpg"),
title: " 全国中小企业股份转让",
title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了满足全国中小企业股份转让系统（以下简称全国股转系统）市场参与人并购重组等特定事项协议转让需求，规范挂牌公司股份特定事项协议转让行为，维护证券市场秩序，保护投资者的合法权益，",
content2:
"根据《全国中小企业股份转让系统股票交易规则》（以下简称《交易规则》）、《中国证券登记结算有限责任公司证券登记规则》，制定本细则。",
},
{
id: 42,
dayof: "03",
day: "2020-7",
timeId: "2020", //时间
typeId: "news", //公司动态
pic: require("../assets/imgs/news/news42.jpg"),
title: " 全国中小企业股份转让系统股票交易规则",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范股票交易行为，保护投资者合法权益，全国中小企业股份转让系统有限责任公司对《全国中小企业股份转让系统股票转让规则》进行了修订，并更名为《全国中小企业股份转让系统股票交易规则》。经中国证监会批准，现予以发布，自发布之日起施行。",
},
{
id: 41,
dayof: "19",
day: "2020-6",
timeId: "2020", //时间
typeId: "news", //公司动态
pic: require("../assets/imgs/news/news41-1.jpg"),
title: " 全国中小企业股份转让系统精选层挂牌审查问答（一）",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了提高精选层挂牌审查工作的规范性和透明度，便于市场主体快速、全面、准确地理解审查要求，明确市场预期，全国中小企业股份转让系统有限责任公司制定了《全国中小企业股份转让系统精选层挂牌审查问答（一）》，现予以发布，自发布之日起施行。",
},
{
id: 40,
dayof: "12",
day: "2020-6",
timeId: "2020", //时间
typeId: "news", //公司动态
pic: require("../assets/imgs/news/news40-1.jpg"),
title:
" 全国中小企业股份转让系统股票向不特定合格投资者公开发行与承销管理细则（试行）",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范全国中小企业股份转让系统股票向不特定合格投资者公开发行及承销行为，保护投资者合法权益，全国中小企业股份转让系统有限责任公司制定了《全国中小企业股份转让系统股票向不特定合格投资者公开发行与承销管理细则（试行）》。经中国证监会批准，现予以发布，自发布之日起施行。",
},
{
id: 39,
dayof: "5",
day: "2020-6",
timeId: "2020", //时间
typeId: "news", //公司动态
pic: require("../assets/imgs/news/news39-1.jpg"),
title:
" 全国中小企业股份转让系统股票向不特定合格投资者公开发行并在精选层挂牌规则（试行）",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范全国中小企业股份转让系统股票向不特定合格投资者公开发行并在精选层挂牌行为，保护投资者合法权益，全国中小企业股份转让系统有限责任公司制定了《全国中小企业股份转让系统股票向不特定合格投资者公开发行并在精选层挂牌规则（试行）》。",
},
{
id: 38,
dayof: "29",
day: "2020-5",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news39.jpg"),
title:
" 全国中小企业股份转让系统股票向不特定合格投资者公开发行保荐业务管理细则（试行）",
// title2: "系统挂牌公司股份特定事项协议转让细则",
link:
"全国中小企业股份转让系统股票向不特定合格投资者公开发行保荐业务管理细则（试行）.docx",
know: "",
},
{
id: 37,
dayof: "15",
day: "2020-5",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news38-1.png"),
title: " 全国中小企业股份转让系统股票挂牌审查工作指引",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范全国中小企业股份转让系统（以下简称全国股转系统）股票挂牌审查流程，根据《非上市公众公司监督管理办法》《全国中小企业股份转让系统业务规则（试行）》《全国中小企业股份转让系统股票定向发行规则》...",
},
{
id: 36,
dayof: "30",
day: "2020-4",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news37-1.jpg"),
title: " 全国中小企业股份转让系统股票定向发行指南",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
" 为了规范股票定向发行行为，保护投资者合法权益，全国中小企业股份转让系统有限责任公司对《全国中小企业股份转让系统股票发行业务指南》进行了修订...",
},
{
id: 35,
dayof: "24",
day: "2020-4",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news37.jpg"),
title: " 全国中小企业股份转让系统股票定向发行临时公告模板",
// title2: "系统挂牌公司股份特定事项协议转让细则",
// content: "此内容为链接",
know: "",
},
{
id: 34,
dayof: "17",
day: "2020-4",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news36.jpg"),
title: " 全国中小企业股份转让系统股票定向发行规则",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范全国中小企业股份转让系统（以下简称全国股转系统）挂牌公司和申请挂牌公司（以下合称发行人）的股票定向发行行为，保护投资者合法权益...",
},
{
id: 33,
dayof: "10",
day: "2020-4",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news35.jpg"),
title: "全国中小企业股份转让系统挂牌公司治理规则",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范挂牌公司的组织和行为，提升挂牌公司治理水平，保护投资者合法权益，根据《公司法》《证券法》《非上市公众公司监督管理办法》等法律法规、部门规章，制定本规则。",
},
{
id: 32,
dayof: "2",
day: "2020-4",
timeId: "2020", //时间
typeId: "news", //新闻
pic: require("../assets/imgs/news/news33_1.png"),
title: "全国中小企业股份转让系统挂牌公司信息披露规则",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"为了规范挂牌公司及其他信息披露义务人的信息披露行为，加强信息披露事务管理，保护投资者合法权益，根据《公司法》《证券法》《非上市公众公司监督管理办法》《非上市公众公司信息披露管理办法》等法律法规、部门规章，制定本规则。",
},
{
id: 31,
dayof: "5",
day: "2020-3",
timeId: "2020", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news34.jpg"),
title: " 抓好防疫防控，做好复工复产——市政协领导一行走访雷腾飞路",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"3月5日下午，市政协副主席徐逸波、市政协副秘书长、办公厅主任袁鹰携市政协相关领导一行莅临雷腾飞路，深入了解我司在疫情下的防控情况及业务运营情况...",
},
{
id: 30,
dayof: "28",
day: "2019-11",
timeId: "2019", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news32_1.jpg"),
title: " 再获一奖，雷腾软件喜得金号角奖“2019最具创新力公司”",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"2019年11月28日，由ChinaIPO资本邦发起主办的2019新三板峰会暨第四届金号角奖颁奖盛典隆重召开，雷腾软件（股票代码430356）获评“金号角奖”2019最具创新力公司。",
},
{
id: 29,
dayof: "17",
day: "2019-10",
timeId: "2019", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news31_1.jpg"),
title: " 雷腾软件荣获2019年第三届中国新三板年度风云榜最佳公司治理奖",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"2019年10月17日，第三届新三板年度风云榜在北京举行，雷腾软件（股票代码430356）在近万家挂牌企业中脱颖而出，荣获“2019年第三届新三板年度风云榜——最佳公司治理奖”。",
},
{
id: 28,
dayof: "19",
day: "2018-10",
timeId: "2019", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news30.jpg"),
title: " 雷腾软件斩获“2018中国新三板年度风云榜”三项大奖 ",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"2018年10月19日，第二届中国新三板年度风云榜暨投资者保护指数发布会在京举行。上海雷腾软件股份有限公司（以下简称“雷腾软件”）在万家挂牌企业中脱颖而出...",
},
{
id: 27,
dayof: "13",
day: "2018-9",
timeId: "2018", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news28.png"),
title:
"雷腾联合研发的商用级5G/V2X智联驾驶与车路协同系统率先应用于厦门BRT",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"2018年9月13日，国内首个“面向5G的城市级智能网联应用”正式发布，搭载着雷腾最新参与研发的“5G/V2X智联驾驶与车路协同系统”，厦门BRT又向前迈出一步...",
},
{
id: 26,
dayof: "25",
day: "2018-5",
timeId: "2018", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news27.png"),
title: " 恭贺雷腾软件再次成功跻身创新层 ",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"全国股转公司发布2018年创新层名单，940家企业正式入围。雷腾软件（430356）凭借满足创新层维持标准，再次成功跻身创新层，并在车联网及绿色智能出行领域独领风骚。...",
},
{
id: 25,
dayof: "2",
day: "2018-3",
timeId: "2018", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news29.jpg"),
title:
"研发能力持续提升！雷腾软件荣获2017年度浦东新区企业研发机构认定",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"2018年3月2日，上海市浦东新区科技和经济委员会发布了“浦东新区企业研发机构认定公告”，上海雷腾软件股份有限公司（以下简称“雷腾软件”）位列其中...",
},
{
id: 24,
dayof: "1",
day: "2018-3",
timeId: "2018", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news26.png"),
title: "雷腾软件被评为2017年度上海市科技小巨人优秀企业",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
" 2017年度上海市科技小巨人（培育）企业名单日前“出炉”，此次共有202家企业参与了申报，经验收评估，雷腾软件被评估为“优秀”！...",
},
{
id: 23,
dayof: "17",
day: "2018-1",
timeId: "2018", //时间
typeId: "dynamic", //新闻
pic: require("../assets/imgs/news/news25.png"),
title: "飞路巴士实力揽获“智慧商务出行探索奖",
// title2: "系统挂牌公司股份特定事项协议转让细则",
content:
"1月17日，中国汽车技术研究中心主办的2018国际新能源汽车用户评价与应用创新研讨会在广西柳州举办，飞路巴士从众多企业中脱颖而出，荣获“智慧商务出行探索奖”...",
},
],
newList: [], //当前页显示内容
isActive: "dynamic", //type-新闻
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
currentPage(newval) {
if (newval == 1) {
this.isDisabled = "start";
} else if (newval == this.totalPage) {
this.isDisabled = "end";
} else {
this.isDisabled = "";
}
},
ispage(newVal) {
// debugger
if (this.currentPage == 1) {
this.ispage = "first";
} else if (this.currentPage == this.totalPage) {
this.ispage = "end";
} else {
this.ispage = "";
}
},
},
//方法集合
methods: {
toTop() {
// this.$refs.newsCenter.scrollTo({
// top: 0,
// behavior: "smooth",
// });
console.log(this.$refs.newsCenter);
this.$refs.newsCenter.scrollTop = 0;
document.body.scrollTop = 0 + "px";
},
scroll() {
let scrollTop = this.$refs.newsCenter.scrollTop;
if (scrollTop > 300) {
this.topShow = true;
} else {
this.topShow = false;
}
},
//wap 查看更多
lookMore() {
this.newList = this.list.filter((v) => {
return v.typeId == this.isActive;
});
_czc.push([
"_trackEvent",
"RB0610-点击【点击查看更多】",
"用户点击【点击查看更多】按钮",
"",
"",
"click_in_readmore_newscenter_page_wap",
]);
this.showFlag = false;
},
// scroll() {
// if (window.pageYOffset > 50) {
// // this.$store.state.showHeader = true;
// // console.log(this.$store.state.showHeader);
// this.$children[0].showHeader = true;
// }
// },
//上一页
prev() {
_czc.push([
"_trackEvent",
`RA0605-点击【上一页】`,
`用户点击【上一页】按钮`,
"",
"",
`click_in_previous_page_newscenter_page`,
]);
if (this.currentPage == 1) {
this.isDisabled = "start";
return false;
} else {
this.currentPage--;
this.getCurrentPageData();
}
if (this.currentPage == 1) {
this.ispage = "first";
} else if (this.currentPage == this.totalPage) {
this.ispage = "end";
} else {
this.ispage = "";
}
},
//下一页
next() {
_czc.push([
"_trackEvent",
`RA0606-点击【下一页】`,
`用户点击【下一页】按钮`,
"",
"",
`click_in_next_page_newscenter_page`,
]);
if (this.currentPage == this.totalPage) {
this.isDisabled = "end";
return false;
} else {
this.currentPage++;
this.getCurrentPageData();
}
//在切换页面的时候同时更新首尾页和上下页的状态
if (this.currentPage == 1) {
this.ispage = "first";
} else if (this.currentPage == this.totalPage) {
this.ispage = "end";
} else {
this.ispage = "";
}
},
//切换 新闻的时间、类型
toggle(arg) {
this.isActive = arg;
//拿到数据
if (this.judge() == "pc") {
this.currentPage = 1;
this.initPage();
this.getCurrentPageData();
var arg2 = "A";
} else if (this.judge() == "mobile") {
this.showFlag = true;
//移动端只过滤切换的类型
this.newList = this.list.filter((v) => {
return v.typeId == arg;
});
this.newList = this.newList.splice(0, 6);
var arg2 = "B";
}
let type = "";
let type2 = "";
let id = "";
if (this.isActive == "dynamic") {
type = "公司动态";
type2 = "company_news_wap";
id = 2;
} else {
type = "行业新闻";
type2 = "Journalism_wap";
id = 3;
}
_czc.push([
"_trackEvent",
`R${arg2}060${id}-点击【${type}】`,
`用户点击【${type}】按钮`,
"",
"",
`click_in_${type2}`,
]);
},
getCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
var getSessionList = JSON.parse(window.sessionStorage.getItem("list"));
window.sessionStorage.removeItem("list");
if (getSessionList) {
this.list2 = getSessionList.filter((v) => {
return v.typeId == this.isActive;
});
} else {
this.list2 = this.list.filter((v) => {
return v.typeId == this.isActive;
});
}
this.newList = this.list2.slice(begin, end);
},
// to toDetail
toDetail(item) {
console.log(this.newList, "list");
// 1.存储数据
// 2.返回到页面之后，根据数据进行分页
// let sessionList = JSON.stringify(this.newList);
// window.sessionStorage.setItem("list", sessionList);
// console.log(this.currentPage,'currentpage')
window.sessionStorage.setItem("type", this.isActive);
window.sessionStorage.setItem("currentPage", this.currentPage);
if (item.id == 38 || item.id == 35) {
} else {
window.sessionStorage.setItem(
"distance",
this.$refs.newsCenter.scrollTop
);
console.log(this.new);
this.$router.push({
path: "/newsDetail",
query: {
id: item.id,
title: item.title,
typeId: item.typeId,
},
});
}
if (this.judge() == "pc") {
var arg = "A";
} else if (this.judge() == "mobile") {
var arg = "B";
}
let typeContent = "";
if (item.typeId == "dynamic") {
_czc.push([
"_trackEvent",
`R${arg}06080${item.id}-点击公司动态下文章（${item.title}）`,
`用户点击公司动态下文章（${item.title}）`,
"",
"",
`click_in_company_news_（${item.title}）_wap`,
]);
} else {
_czc.push([
"_trackEvent",
`R${arg}06090${item.id}-点击行业新闻下文章（${item.title}）`,
`用户点击行业新闻下文章（${item.title}）`,
"",
"",
`click_in_industry_news_（${item.title}）_wap`,
]);
}
console.log(item.typeId);
},
//首尾页
page(arg) {
this.ispage = arg;
if (arg == "first") {
_czc.push([
"_trackEvent",
`RA0604-点击【首页】`,
`用户点击【首页】按钮`,
"",
"",
`click_in_home page_newscenter_page`,
]);
this.currentPage = 1;
this.getCurrentPageData();
} else if (arg == "end") {
_czc.push([
"_trackEvent",
`RA0607-点击【末页】`,
`用户点击【末页】按钮`,
"",
"",
`click_in_Last_newscenter_page`,
]);
this.currentPage = this.totalPage;
this.getCurrentPageData();
}
},
//初始化分页
initPage() {
var getSessionList = JSON.parse(window.sessionStorage.getItem("list"));
window.sessionStorage.removeItem("list");
if (getSessionList) {
this.newList = getSessionList;
} else {
this.newList = this.list.filter((v) => {
return v.typeId == this.isActive;
});
}
// 计算页数
this.totalPage = Math.ceil(this.newList.length / this.pageSize);
this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
if (this.currentPage == 1 && this.currentPage == this.totalPage) {
this.isDisabled = "none";
} else if (this.currentPage == 1) {
this.isDisabled = "start";
} else if (this.currentPage == this.totalPage) {
this.isDisabled = "end";
}
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
let sessionType = window.sessionStorage.getItem("type");
//记忆功能-tab类型
window.sessionStorage.removeItem("type");
if (sessionType) {
this.isActive = sessionType;
} else {
this.isActive = "dynamic";
}
let SessioncurrentPage = window.sessionStorage.getItem("currentPage");
//记忆功能-当前页类型
window.sessionStorage.removeItem("currentPage");
if (SessioncurrentPage) {
this.currentPage = SessioncurrentPage;
} else {
this.currentPage = 1;
}
if (this.judge() == "pc") {
this.initPage();
this.getCurrentPageData();
} else {
//移动端
this.newList = this.list.filter((v) => {
return v.typeId == this.isActive;
});
this.newList = this.newList.splice(0, 6);
}
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.footer.height = window.innerHeight + "px";
if (window.sessionStorage.getItem("distance")) {
// this.$refs.newsCenter.scroll({
// top: window.sessionStorage.getItem("distance"),
// });
this.$refs.newsCenter.scrollTop = window.sessionStorage.getItem(
"distance"
);
sessionStorage.removeItem("distance");
}
this.x = document.getElementsByClassName("newsCenter")[0]; //获得dom对象x
this.x.addEventListener("scroll", this.scroll); //委托监听事件,handleScrol1为你要调用的方法
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {
// this.$refs.newsCenter.removeEventListener("scroll", this.scroll);
}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
3.css
<style lang='scss' scoped>
//@import url(); 引入公共css类
.wap {
.footer {
height: 628px;
}
position: relative;
}
#newsCenter {
position: relative;
height: 100vh;
overflow: scroll;
-ms-overflow: scroll;
.more {
padding: 10px;
border: 1px solid #144aaa;
color: #144aaa;
margin-bottom: 20px;
}
.bc {
height: 240px;
background: url("../assets/imgs/news/04-news-bar.png") no-repeat center;
// background-size: 100% 100%;
}
.tabs {
// display: flex;
// justify-content:center;
width: 1180px;
margin: 0 auto;
.tips {
display: flex;
justify-content: center;
font-size: 20px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(21, 21, 21, 0.1);
.left {
display: flex;
.active {
background-color: #ccc;
}
.time-item {
margin-right: 10px;
padding: 4px;
}
}
.right {
display: flex;
.title-item {
padding: 4px 0;
// margin-right: 40px;
margin: 0 20px;
}
.active {
position: relative;
color: #144aaa;
// border-bottom: 2px solid #144aaa;
}
.active::after {
position: absolute;
content: "";
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #144aaa;
}
}
}
.content {
.item:nth-of-type(even) {
flex-direction: row-reverse;
}
.item {
display: flex;
// align-items: stretch;
margin-bottom: 20px;
.item-img {
position: relative;
// width: 50%;
height: 278px;
width: 590px;
.timeTips {
width: 80px;
height: 80px;
line-height: 20px;
.day {
font-size: 28px;
}
.year-m {
font-size: 16px;
}
position: absolute;
left: 4px;
top: 3px;
display: flex;
flex-direction: column;
background-color: #e8e8e8;
text-align: center;
box-sizing: border-box;
padding: 3px 0 0px;
color: #144aaa;
opacity: 0.8;
}
img {
height: 278px;
width: 590px;
// width: 100%;
// width: 640px;
// height: 272px;
// width: 100%;
// height: 100%;
vertical-align: middle;
}
}
.item-right {
width: 50%;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
// justify-content: space-between;
padding: 20px 30px;
box-sizing: border-box;
// padding-bottom: 0;
.title,
.title2 {
font-size: 16px;
color: #144aaa;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.title {
-webkit-line-clamp: 1;
}
.title2 {
padding-bottom: 4px;
border-bottom: 1px solid #144aaa;
}
.content {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.know {
display: flex;
flex-direction: row-reverse;
.font {
padding: 4px;
border: 1px solid #144aaa;
color: #144aaa;
}
}
}
}
}
}
.pagination {
display: flex;
justify-content: center;
.pag-item {
margin-right: 4px;
padding: 4px 12px;
border: 1px solid #ccc;
cursor: pointer;
}
.prev,
.next,
.last {
border-radius: 4px;
}
.tip {
border: 0;
cursor: auto;
}
.active {
background-color: #dae7ff;
color: #fff;
border: 0;
border-radius: 4px;
cursor: not-allowed;
}
.disable {
background-color: #efefef;
color: #ccc;
cursor: not-allowed;
}
}
}
.toTop {
width: 60px;
height: 60px;
// border-radius: 8px;
// background-color: #fff;
opacity: 0.9;
position: fixed;
bottom: 20px;
right: 20px;
text-align: center;
line-height: 60px;
z-index: 100;
img {
width: 40px;
vertical-align: middle;
}
}
</style>
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
