微信小程式-滾動訊息通知效果
阿新 • • 發佈:2019-01-28
這次我主要想總結一下微信小程式實現上下滾動訊息提醒,主要是利用swiper元件來實現,swiper元件在小程式中是滑塊檢視容器。
我們通過vertical屬性(預設為false,實現預設左右滾動)設定為true來實現上下滾動。
(需要注意的是:只要你的swiper存在vertical屬性,無論你給值為true或者false或者不設引數值,都將實現上下滾動)
從深圳回來做了一個微信小程式的小專案,令人欣慰的一點事是,回來很快時間內把在深圳兩天的房租給賺回來了,哈哈...
從深圳回來做了一個微信小程式的小專案,令人欣慰的一點事是,回來很快時間內把在深圳兩天的房租給賺回來了,哈哈…
wxml
1 <swiperclass="swiper_container"vertical="true"autoplay="true"circular="true"interval="2000">
2 <blockwx:for="{{msgList}}">
3 <navigatorurl="/pages/index/index?title={{item.url}}"open-type="navigate">
4 <swiper-item>
5 <viewclass="swiper_item"> {{item.title}}</view>
6 </swiper-item>
7 </navigator>
8 </block>
9 </swiper>
wxss
1 .swiper_container {
2 height: 55rpx;
3 width: 80vw;
4 }
5
6 .swiper_item {
7 font-size: 25rpx;
8 overflow: hidden;
9 text-overflow: ellipsis;
10 white-space : nowrap;
11 letter-spacing: 2px;
12 }
Js
1 var app = getApp()
2 Page({
3 data: {
4 },
5 onLoad(e) {
6 console.log(e.title)
7 this.setData({
8 msgList: [
9 { url: "url", title: "公告:多地首套房貸利率上浮 熱點城市漸迎零折扣時代" },
10 { url: "url", title: "公告:悅如公寓三週年生日趴邀你免費吃喝歡唱" },
11 { url: "url", title: "公告:你想和一群有志青年一起過生日嘛?" }]
12 });
13 }
14 })
資料放在了setData函式中,setData函式的主要作用是將資料從邏輯層傳送到檢視層,但是需要避免單次設定大量的資料。
效果: