Home  >  Article  >  WeChat Applet  >  WeChat applet scrolling message notification implementation code

WeChat applet scrolling message notification implementation code

小云云
小云云Original
2018-02-03 09:12:103028browse

When we walk on the street, we often see scrolling message notifications on the doors of many stores. This article mainly introduces the implementation of scrolling message notifications in the WeChat applet in detail. It has certain reference value. For those who are interested, You can refer to it, I hope it can help everyone.

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

Related recommendations:


Scroll Example code display of message notification applet


The above is the detailed content of WeChat applet scrolling message notification implementation code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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 admin@php.cn