小程式開發資訊公告輪播及點選跳轉
阿新 • • 發佈:2018-12-05
給大家展示一個簡單的資訊公告輪播,及其點選後跳轉 ,效果如下:
wxml
<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000"> <block wx:for="{{inforList}}"> <navigator url="{{item.url}}" open-type="navigate"> <swiper-item> <view class="swiper_item">{{item.title}}</view> </swiper-item> </navigator> </block> </swiper>
js,把'url'改成要跳轉頁面的路徑
Page({
data: {
},
onLoad(e) {
console.log(e.title)
this.setData({
inforList: [
{ url: "url", title: "公告:國家關於增值稅調整的通知" },
{ url: "url", title: "公告:清得快二線城市通知" },
{ url: "url", title: "公告:納尼,要回去畢業答辯了?" }]
});
}
})
wxss
page{ background-color:#EDECE8; } .swiper_container { margin-top: 20rpx; height: 55rpx; width: 100%; background-color: white; } .swiper_item { margin-top: 10rpx; font-size: 25rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 2px; }