<template> <view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}"> <uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound" :color="getColor(theme)" size="22" /> <swiper class="notice_center" vertical v-if="direction=='column'" :autoplay="true" :interval="4000" :duration="500" :circular="true" disable-touch> <swiper-item v-for="(item, index) in list" :key="index" class="swiperIn" @click="goItem(item)"> <view>{{item[theKey]}}</view> </swiper-item> </swiper> <view :class="['','notice_center1','notice_center2','notice_center3','notice_center4','notice_center5'][speedTime]" v-else><view class="content">{{list[0][theKey]}}</view></view> <view class="notice_right" v-if="showMore"> <view @click="goMore">更多</view> </view> </view> </template> <script> export default { name:"notice-one", props:{ // 速度 speed: { type:Number, default:1 }, //主题色,default|primary|error|warning|success|info theme: { type: String, default: 'default' }, // 是否显示左侧icon showIcon: { type: [Boolean, String], default: false }, // 是否显示更多 showMore: { type: [Boolean, String], default: false }, list: { type: Array, default() { return [{id:1,title:'公告1'},{id:2,title:'公告2'}] } }, //公告数组的键名 theKey:{ type: String, default: 'title' }, //方向,column垂直,row水平时取第一条公告 direction:{ type: String, default: 'column' } }, data() { return { text:'', speedTime:1 }; }, mounted() { // 缓存状态栏+标题栏的高度 const query = wx.createSelectorQuery().in(this) query.select('.content').boundingClientRect((rect) => { console.log(rect.width); let newWidth = rect.width; if(newWidth <=420) { this.speedTime = 1; } if(newWidth >= 420 && newWidth < 720) { this.speedTime = 2; } if(newWidth >= 720 && newWidth < 820) { this.speedTime = 3; } if(newWidth >= 820 && newWidth < 920) { this.speedTime = 4; } if(newWidth >= 920) { this.speedTime = 5; } }).exec() }, methods:{ getColor(theme){ if(theme=="primary"){ return "#2979FF" }else if(theme=="error"){ return "#FA3534" }else if(theme=="warning"){ return "#FF9A43" }else if(theme=="success"){ return "#1BBF6C" }else if(theme=="info"){ return "#909399" }else{ return "#303133" } }, getBgColor(theme){ if(theme=="primary"){ return "#ECF5FF" }else if(theme=="error"){ return "#FEF0F0" }else if(theme=="warning"){ return "#FDF6EC" }else if(theme=="success"){ return "#DBF1E1" }else if(theme=="info"){ return "#F4F4F5" }else{ return "#FFFFFF" } }, goItem(item){ uni.navigateTo({ url:`/pagesB/notice-detail/notice-detail?id=${item.id}` }) }, goMore(){ uni.navigateTo({ url:`/pagesB/notice-list/notice-list` }) } } } </script> <style lang="scss"> .xzw_notice { font-size: 26upx; height: 40upx; display: flex; align-items: center; justify-content: space-between; padding: 0; box-sizing: border-box; width: 100%; .notice_left{ margin: 0 20upx 0 0; } .notice_center{ flex:1; height:90upx; .swiperIn{ height:80upx; display: flex; align-items: center; view{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } } } .notice_center1{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 5s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } .notice_center1{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 5s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } .notice_center2{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 10s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } .notice_center3{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 15s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } .notice_center4{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 20s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } .notice_center5{ flex:1; position: relative; display: flex; align-items: center; height:90upx; overflow: hidden; view{ position: absolute; white-space: nowrap; padding-left: 100%; animation: notice 25s 0s linear infinite both; } } .notice_right { margin: 0 0 0 20upx; } @keyframes notice { 100% { transform: translate3d(-100%, 0, 0); } } } </style>