How to implement scrolling message notifications in WeChat applet

This article mainly introduces the implementation of rolling message notifications in WeChat applet in detail. It has certain reference value. Interested friends can refer to it.

The examples in this article share with everyone the WeChat applet. The specific code to implement scrolling messages is for your reference. The specific content is as follows

Rendering:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the page loading progress bar component in vue

How to use javascript to obtain the date range that is different every day The price

How to implement the image loading component in vue

The above is the detailed content of How to implement scrolling message notifications in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!