Home > Web Front-end > JS Tutorial > body text

How to implement scrolling message notifications in WeChat applet

亚连
Release: 2018-06-08 11:38:06
Original
2566 people have browsed it

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



 
 
  
  {{item.title}}
  
 
 
Copy after login

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: "北大教工合唱团出国演出遇尴尬:被要求给他人伴唱" }]
 });
 }
})
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!