Comment créer un effet de notification de message défilant dans le mini-programme WeChat

Cette fois, je vais vous montrer comment créer un effet de notification de message défilant dans le mini programme WeChat. Quelles sont les précautions pour créer un effet de notification de message défilant dans le mini programme WeChat. Voici un cas pratique, jetons un coup d'oeil.

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;
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment le pool de connexions MySQL utilise les transactions pour recycler automatiquement (avec le code)

Plug-in de navigateur angulaire- dans Explication détaillée de la façon d'utiliser Batarang

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!