微信小程序 公告栏代码
时间: 2023-11-12 14:54:38 浏览: 37
以下是一个简单的微信小程序公告栏代码示例,你可以根据自己的需求进行修改:
HTML:
```
<view class="notice">
<view class="iconfont icon-gonggao"></view>
<swiper class="notice-swiper" duration="3000" circular="{{true}}" vertical="{{true}}" autoplay="{{true}}">
<swiper-item wx:for="{{noticeList}}" wx:key="index">
<view>{{item}}</view>
</swiper-item>
</swiper>
</view>
```
CSS:
```
.notice {
display: flex;
align-items: center;
background-color: #fff;
padding: 10rpx;
font-size: 28rpx;
color: #666;
box-shadow: 0rpx 2rpx 10rpx #ddd;
}
.notice .iconfont {
font-size: 32rpx;
margin-right: 10rpx;
color: #ff9900;
}
.notice-swiper {
width: 100%;
height: 32rpx;
line-height: 32rpx;
}
.notice-swiper .swiper-item {
height: 32rpx;
display: flex;
align-items: center;
}
```
JS:
```
Page({
data: {
noticeList: ['公告1', '公告2', '公告3'] // 公告列表
}
})
```
在这个示例中,我们使用了微信小程序的 `swiper` 组件实现了一个垂直滚动的公告栏,同时也添加了一些简单的样式。你可以根据需要进行自定义。