一个公告喇叭的组件

╰半橙微兮° 2022-11-12 14:58 137阅读 0赞

## 一个公告喇叭的组件 ##

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210324154511150.png][https_img-blog.csdnimg.cn_20210324154511150.png]  
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>

这是喇叭的路径，需要的自己下载  
![20210324161228270.gif_pic_left][]  
2.引入组件  
在需要的页面引入

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

引入完成后就可以使用了

背景色可以自行设置

[https_img-blog.csdnimg.cn_20210324154511150.png]: /images/20221022/3881dc61a6124f9089ea521e491b9be8.png
[20210324161228270.gif_pic_left]: /images/20221022/039a0a22022c47a19682c3a96af3619e.png