标签:fun turn span height drs 100% let hid lin
marquee标签内不能用 ul li ,要用table tr td 才可以
<template> <div class="v-marquee-info"> <!--滚动信息--> <div class="marquee-info-content"> // 错误的 <!-- <marquee style="width: 100%; height:60px;" scrollamount="10" scrolldelay="0" direction="left" behaviour="Scroll" > <ul class="marquee-info" > <li class="marquee-item" v-for="(item,index) in info_List" :key="item.index" @click=‘showDetail(index)‘> {{ item.title }} </li> </ul> </marquee> --> <marquee style="width: 100%; height:60px;" scrollamount="10" scrolldelay="0" direction="left" behaviour="Scroll" > <table class="marquee-info" > <tr> <td class="marquee-item" v-for="(item,index) in info_List" :key="item.index" @click=‘showDetail(index)‘> {{ item.title }} </td> </tr> </table> </marquee> // 这是elementUI的走马灯效果 <!-- <el-carousel arrow="never" type="string" interval="5000"> <el-carousel-item v-for="(item,index) in info_List" :key="item.index" > <h3 @click=‘showDetail(index)‘ >{{ item.title }}</h3> </el-carousel-item> </el-carousel> --> </div> </div> </template> <script> import axios from ‘axios‘ export default { name: ‘v-marquee-info‘, data() { return { info_List: [] } }, mounted(){ axios.get(‘url/sdrs/web/goTZGG.action?type=1‘) .then((result) => { let rs = result.data; let _this = this; if(rs.code == 1){ let rs_list = rs.data.listNotice; for(let i = 0; i < rs_list.length; i++){ _this.info_List.push(rs_list[i]); } } }).catch((err) => { }); }, methods:{ showDetail: function(index){ this.$store.state.i = index; for(var i = 0;i<this.info_List.length;i++){ this.$store.state.detail = this.info_List[index].content; this.$store.state.title = this.info_List[index].title; this.$router.push({name: ‘notiDetail‘}); } } }, } </script> <style scoped lang="scss"> .marquee-info-content { width:80%; margin: 240px auto auto auto; background:rgba(83,209,224,.5); position:relative; overflow:hidden; .marquee-info { height:60px; line-height:60px; font-family: ‘Microsoft YaHei‘; .marquee-item { width:30px; color:#FAFFF8; font-size: 24px; padding:0 150px; } } } </style> <style lang="scss"> //走马灯样式 .el-carousel__container{ text-align: center; line-height: 60px; font-size:26px; color:#fff; height:60px !important; } .el-carousel__indicator--horizontal{ display: none !important; } </style>
标签:fun turn span height drs 100% let hid lin
原文地址:https://www.cnblogs.com/rxfn/p/10874038.html