一个公告喇叭的组件

一个公告喇叭的组件

1.新建一个组件名为Notice的组件

<template>
	<view class="notice-content" :style="{background:backColor}">				//设置自定义的背景色
		<view class="notice-info flex-start">
		  <image src="../static/index/laba.gif" mode=""></image>				//喇叭的图片
	      <swiper :autoplay="true" :interval="3000" :duration="3000" class="swiper-notice" :circular="true" :previous-margin="20+'rpx'"  disable-touch="true" >			//disable-touch禁止拖动，如果不要可以不设置，previous-margin是跟前一个内容的距离，速度interval和duration可以自己设置想要的速度
	        <swiper-item v-for="(not,index10) in noticeList" :key="index10" @click="toUrl">
	          <view class="swiper-item">{{not}}</view>
        	</swiper-item>
     	  </swiper>
		</view>
	</view>
</template>
<script>
	export default {
    name:'Notice',
    props:{
      backColor:''
    },
		data() {
			return {
        noticeList:['恭喜王**通过参与活动抽奖获得二等奖88.88元','恭喜李**通过参与活动抽奖获得一等奖100.00元']
			};
		},
    methods:{
      toUrl(){
        uni.navigateTo({
          url:'/pages/talk/announcement_list'		//跳转到所有公告的页面
        })
      }
    }
	}
</script>

<style scoped>
  .flex-start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .notice-content{
    position: absolute;
    padding: 0 20rpx;
    background: #f2f2f2;
    left: 0;
    right: 0;
  }
  .notice-info{
    height: 60rpx;
    flex-wrap: nowrap;
  }
.notice-info>image{
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}

.swiper-notice{
  width: 90%;
  height: 60%;
}
</style>

这是喇叭的路径，需要的自己下载

2.引入组件
在需要的页面引入

import Notice from '../../components/Notice.vue';
export default {
 components: {
  	Notice
 },
 data（）{
 	return{
		backColor: '#fff'
	}
 }
 }

引入完成后就可以使用了

<view class="news-content">
  <Notice :backColor="backColor"></Notice>
</view>

背景色可以自行设置