微信小程序-滚动消息通知

  写在前面: 

  这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。

  我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动。

(需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动)

 wxml

1 <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
2     <block wx:for="{{msgList}}">
3       <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
4         <swiper-item>
5           <view class="swiper_item">{{item.title}}</view>
6         </swiper-item>
7       </navigator>
8     </block>
9   </swiper>

 wxss

 1 .swiper_container {
 2   height: 55rpx;
 3   width: 80vw;
 4 }
 5 
 6 .swiper_item {
 7   font-size: 25rpx;
 8   overflow: hidden;
 9   text-overflow: ellipsis;
10   white-space: nowrap;
11   letter-spacing: 2px;
12 }

 Js

 1 var app = getApp()
 2 Page({
 3   data: {
 4   },
 5   onLoad(e) {
 6     console.log(e.title)
 7     this.setData({
 8       msgList: [
 9         { url: "url", title: "公告:多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
10         { url: "url", title: "公告:悦如公寓三周年生日趴邀你免费吃喝欢唱" },
11         { url: "url", title: "公告:你想和一群有志青年一起过生日嘛?" }]
12     });
13   }
14 })

  数据放在了setData函数中,setData函数的主要作用是将数据从逻辑层发送到视图层,但是需要避免单次设置大量的数据。

效果

   写在后面

大一暑假已经过去一半,希望我这次广东的两星期之行,可以帮助我下一段的学习在对知识强烈渴望中度过,这样在自己梦寐以求的地方面前,不会感觉到自己的渺小和知识的匮乏而望而却步,不敢走近。

其实行走匆匆的人,不一定是无心观赏两岸的风景,或许在他的心中,有些不可替代的风景,而他匆匆的脚步就是为了他心中的''景色''。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据和云

知己知彼-关于Oracle安全比特币勒索问题揭秘和防范

风险从来都不是臆想和草木皆兵,就在你不经意的时刻,可能风险就突然降临到我们的身边。 近期,国内很多用户的 Oracle 数据库,突然遭遇到莫名其妙的攻击事件,...

2925
来自专栏FreeBuf

黑了前男友网站:从找SQL注入到后台权限

此事可以作为姐妹们查岗查哨或者学习的论文普及,题目我已经想好了——论女友的重要性 or 前女友是颗不定时炸弹 其实事情很简单,就是我闲得天灵盖儿疼(蛋疼是男银的...

1776
来自专栏PPV课数据科学社区

【学习】安装SAS千百遍,仍待SAS如初恋?

作者:谷鸿秋 转自:StatsThinking ? 做人呢,最重要的就是开心。学SAS呢,最重要的就是亲自动手搞定SAS的安装。都曾有过被那个笨重臃肿的安装文件...

43112
来自专栏大神带我来搬砖

站在道德的制高点来写程序——免费获取IntelliJ IDEA license

1384
来自专栏吉浦迅科技

【用户经验分享】Jetson TX1-TX2通电后自动开机运行的方法

国庆前(我要是没失忆的话应该是2017年的国庆)有群友问到Jetson如何开机自启动(意思是不想每次都人为的按下开机按键)。刚开始我以为他有程序要开机自启动...

3786
来自专栏pythonlove

Linux防火墙iptables/netfilter(一)

防火墙大家都不陌生,或者说都听说过,现实中的防火墙是将一个区域内的火隔离开来使之不蔓延到另一个区域,计算机领域的防火墙与之功能类似,也是为了隔离危险。在如今广阔...

501
来自专栏人人都是极客

激光雷达避障小车的制作

作为主控芯片的实时系统,提供多线程编程.小车的每个重要的需要实时的功能都单独作为一个线程.如小车的mpu9250姿态解算出姿态角(Roll、Pitch、Yaw ...

1012
来自专栏BestSDK

HomeKit SDK:为物联网提供高效能与安全防护

恩智浦HomeKitSDK支持AppleHomeKit传输协定,包括低功耗蓝牙(BLE)4.2、Wi-Fi、以太网路与iCloud远端存取,适用于恩智浦所有微控...

3266
来自专栏安恒信息

研究人员将在Blackhat 2013上讲解如何30秒破解SSL

Salesforce和Square工程师Angelo Prado和Neal Harris将在Blackhat USA 2013上发表《SSL,30秒破解-超越C...

2546
来自专栏大神带我来搬砖

标题党:第一次接触区块链技术,竟然是这种方式

1512

扫码关注云+社区