微信小程式-公告滾動訊息通知
阿新 • • 發佈:2018-11-23
寫在前面:
這次我主要想總結一下微信小程式實現上下滾動訊息提醒,主要是利用swiper元件來實現,swiper元件在小程式中是滑塊檢視容器。
我們通過vertical屬性(預設為false,實現預設左右滾動)設定為true來實現上下滾動。
(需要注意的是:只要你的swiper存在vertical屬性,無論你給值為true或者false或者不設引數值,都將實現上下滾動)
wxml
1 <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000"> 2 <block wx:for="{{msgList}}"> 3 <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate"> 4 <swiper-item> 5 <view class="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
按 Ctrl+C 複製程式碼
按 Ctrl+C 複製程式碼
資料放在了setData函式中,setData函式的主要作用是將資料從邏輯層傳送到檢視層,但是需要避免單次設定大量的資料。
效果
寫在後面
大一暑假已經過去一半,希望我這次廣東的兩星期之行,可以幫助我下一段的學習在對知識強烈渴望中度過,這樣在自己夢寐以求的地方面前,不會感覺到自己的渺小和知識的匱乏而望而卻步,不敢走近。
其實行走匆匆的人,不一定是無心觀賞兩岸的風景,或許在他的心中,有些不可替代的風景,而他匆匆的腳步就是為了他心中的''景色''。