Implementierung der Scroll-Nachrichtenbenachrichtigung im WeChat-Applet

In diesem Artikel wird hauptsächlich der Beispielcode für die WeChat-Applet-Scrolling-Nachrichtenbenachrichtigung vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Vorab geschrieben:

Dieses Mal möchte ich hauptsächlich die Implementierung von nach oben und unten scrollenden Nachrichtenerinnerungen im WeChat-Applet zusammenfassen, die hauptsächlich durch die Verwendung von implementiert wird Die Swiper-Komponente wird im Applet verwendet. Das Programm ist ein Slider-Ansichtscontainer.

Wir setzen das vertikale Attribut (Standard ist false, um standardmäßig einen Bildlauf nach links und rechts zu erreichen) auf true, um einen Bildlauf nach oben und unten zu erreichen.

(Es ist zu beachten, dass Ihr Swiper nach oben und unten scrollt, solange er über ein vertikales Attribut verfügt, unabhängig davon, ob Sie den Wert wahr oder falsch angeben oder keinen Parameterwert festlegen.)

Zurück aus Shenzhen habe ich dazu ein kleines WeChat-Miniprogrammprojekt gestartet. Das Erfreuliche ist, dass ich nach meiner Rückkehr die Miete für zwei Tage in Shenzhen sehr schnell zurückverdient habe, haha...

wxml

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
    <swiper-item>
     <view class="swiper_item">{{item.title}}</view>
    </swiper-item>
   </navigator>
  </block>
 </swiper>

wxss

 .swiper_container {
 height: 55rpx;
 width: 80vw;
}

.swiper_item {
 font-size: 25rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 letter-spacing: 2px;
}　

Js

var app = getApp()
Page({
 data: {
 },
 onLoad(e) {
  console.log(e.title)
  this.setData({
   msgList: [
    { url: "url", title: "公告：多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
    { url: "url", title: "公告：悦如公寓三周年生日趴邀你免费吃喝欢唱" },
    { url: "url", title: "公告：你想和一群有志青年一起过生日嘛？" }]
  });
 }
})　

Die Daten werden in der setData-Funktion platziert. Die Hauptfunktion der setData-Funktion besteht darin, Daten von der Logikschicht an die Ansichtsschicht zu senden. Es ist jedoch zu vermeiden, dass eine große Anzahl von Daten gleichzeitig festgelegt wird.

Wirkung

Schreiben Sie es hinten

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall ist Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Der Effekt der dynamischen Anzeige des Projekt-Countdowns durch das WeChat-Applet

Karussell mit WeChat-Applet-Netzwerkanfragen Bild

Das obige ist der detaillierte Inhalt vonImplementierung der Scroll-Nachrichtenbenachrichtigung im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!