先來做一個輪番圖。
效果如下：
common-style.css
view,swiper,swiper-item{box-sizing: border-box;
}index.vue
<template><view class="homeLayout"><view class="banner"><swiper circular indicator-dots autoplay><swiper-item><image src="../../common/images/581c367aa65db_1024.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="../../common/images/581c449f64980_1024.jpg"mode="aspectFill"></image></swiper-item></swiper></view></view>
</template><script setup></script><style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;swiper-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}}
</style>圖片素材如下：
可以自己到網上下載圖片素材，放到common下的image下
接下來做公告
該音量圖標到uniapp官網下載，
步驟如下：
點擊下載&安裝
下載并導入
按打開
復制基本用法的代碼
下滑找到音量
把基本用法的type=“contact”的contact改成sound-filled，可以調整大小和顏色。
如下：
<view class="notice"><view class="left"><uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons><text class="text">公告</text></view><view class="center"></view><view class="right"></view></view>同理，在right下加個箭頭
<view class="right"><uni-icons type="right" size="16" color="#333"></uni-icons></view>效果如下：
調整一下：
<view class="notice"><view class="left"><uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical autoplay interval="1500" duration="300" circular><swiper-item v-for="item in 4">文字內容文字內容文字內容文字內容文字內容</swiper-item></swiper></view><view class="right"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view><style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;swiper-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice{width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left{width: 140rpx;display: flex;align-items: center;justify-content: center;.text{color: #28b389;font-weight: 600;font-size: 28rpx;}}.center{flex: 1;swiper{height: 100%;swiper-item{height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right{width: 70rpx;display: flex;align-items: center;justify-content: center;}}}
</style>
效果如下：
完整代碼如下：
<template><view class="homeLayout"><view class="banner"><swiper circular indicator-dots autoplay><swiper-item><image src="../../common/images/581c367aa65db_1024.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="../../common/images/581c449f64980_1024.jpg"mode="aspectFill"></image></swiper-item></swiper></view><view class="notice"><view class="left"><uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons><text class="text">公告</text></view><view class="center"><swiper vertical autoplay interval="1500" duration="300" circular><swiper-item v-for="item in 4">文字內容文字內容文字內容文字內容文字內容</swiper-item></swiper></view><view class="right"><uni-icons type="right" size="16" color="#333"></uni-icons></view></view></view>
</template><script setup></script><style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;swiper-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice{width: 690rpx;height: 80rpx;line-height: 80rpx;background: #f9f9f9;margin: 0 auto;border-radius: 80rpx;display: flex;.left{width: 140rpx;display: flex;align-items: center;justify-content: center;.text{color: #28b389;font-weight: 600;font-size: 28rpx;}}.center{flex: 1;swiper{height: 100%;swiper-item{height: 100%;font-size: 30rpx;color: #666;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}.right{width: 70rpx;display: flex;align-items: center;justify-content: center;}}}
</style>
)
)
