Code d'implémentation de la notification de message défilant de l'applet WeChat

Lorsque nous marchons dans la rue, nous voyons souvent des notifications de messages défilants sur les portes de nombreux magasins. Cet article présente principalement la mise en œuvre des notifications de messages défilants dans l'applet WeChat. Pour ceux qui sont intéressés, Vous pouvez vous y référer, j'espère que cela pourra aider tout le monde.

Rendu :

index.wxml

<!--index.wxml-->
<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000">
 <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>

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 },
 onLoad(e) {
 console.log(e.title)
 this.setData({
  msgList: [
  { url: "url", title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
  { url: "url", title: "交了20多年的国内漫游费将取消 你能省多少话费？" },
  { url: "url", title: "北大教工合唱团出国演出遇尴尬:被要求给他人伴唱" }]
 });
 }
})

index.wxss

/**index.wxss**/

.swiper_container {
 background-color: red;
 height: 50rpx;
 width: 80vw;
}

.swiper_item {
 font-size: 30rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Recommandations associées :

Exemple d'affichage de code d'une applet de notification de message défilant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!