以下是一個微信小程序中實現左右滾動公告欄效果的簡單代碼示例:
<view class="scroll-view"><view class="notice-list" style="transform:translateX({{translateX}}px)">
<block wx:for="{{notices}}" wx:key="index">
<text class="notice-item">{{item}}</text>
</block>
</view>
</view>
Page({data: {
notices: ['公告1', '公告2', '公告3'], // 公告列表
translateX: 0, // 滾動距離
},
onLoad: function () {
const self = this;
setInterval(function () {
// 每隔一段時間向左滾動一條公告
const newTranslateX = self.data.translateX - 50; // 滾動速度,可根據需要調整
self.setData({
translateX: newTranslateX,
})
}, 2000); // 滾動間隔時間,可根據需要調整
},
})
.scroll-view {width: 100%;
overflow-x: hidden;
}
.notice-list {
display: flex;
transition: transform 0.5s ease-in-out;
}
.notice-item {
padding: 10px;
}
以上代碼實現了一個簡單的左右滾動公告欄效果。在data中定義了公告列表notices和滾動距離translateX。通過定時器,在onLoad函數中每隔一段時間更新translateX的值,實現公告的左滾動效果。
在布局上使用了一個scroll-view容器包裹公告列表,并設置了overflow-x: hidden;來隱藏超出容器寬度的內容。通過給公告列表容器添加transform:translateX({{translateX}}px)樣式來實現滾動效果。
請根據需要自行調整代碼中的滾動速度、滾動間隔時間以及樣式等參數。