flying-monkey/components/notices/notice-one/notice-one.vue

295 lines
5.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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}}</view>
</swiper-item>
</swiper>
<view :class="['','notice_center1','notice_center2','notice_center3','notice_center4','notice_center5'][speedTime]" v-else>
<view class="content">{{list[0]}}</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>