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

  写在前面: 

  这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

神器分享:物联网黑客工具包

今天,我将在BSides San Francisco做一个题为“物联网黑客工具包”的演讲。我会准备一个幻灯片并且发布一篇博客去参加这个演讲,如果有我演讲的视频链...

740
来自专栏牛客网

offer已拿 回馈牛客

1805
来自专栏编程一生

IO和socket编程

1073
来自专栏令仔很忙

新手学EasyUi+JS----ComboBox 级联

      最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下:

963
来自专栏牛客网

秋招时间规划,知识点汇总,以及面试总结一、知识储备二、面试问题三、心态变化四、总结

秋招已结束,作为一个平时潜水的牛友,很感激牛客网和广大牛友们。在我无知时,给与我知识;在我烦恼时,给与我慰藉;现在自己也拿到了心仪的offer,就简单写写这段时...

36311
来自专栏杨建荣的学习笔记

最近在读的一些文章

我犯下的代价惨痛的错误使我改变了看问题的角度,从“我知道我是对的”变成了“我怎么知道我是对的”。这些错误让我养成了谦逊的习惯,我需要用谦逊平衡我的勇敢。—《原则...

582
来自专栏java思维导图

史上最污技术解读,60 个 IT 术语我竟然秒懂了......

假设你是个妹子...... ? 假设你是个妹子,你有一位男朋友,于此同时你和另外一位男生暧昧不清,比朋友好,又不是恋人。你随时可以甩了现任男友,另外一位马上就能...

42110
来自专栏JackeyGao的博客

全宋词爬取过程及数据分析

.tagul-attribution { display: none; } .block { padding-bottom: 0 !impo...

692
来自专栏包子铺里聊IT

跟花和尚学系统设计:明星公司之Netflix(中篇)

谁是花和尚? 花和尚是一个定居西雅图的程序员,拥有多年系统设计和开发经验。喜欢研究和总结System Design, 并传授给大家。花和尚在MITBBS一篇 "...

3736
来自专栏包子铺里聊IT

面向对象设计——你究竟想问什么

面向对象设计(OOD)是技术面试中几乎必考的问题,也算新手村中的老大难问题。常听那些半路转CS的学生朋友们感慨,「算法问题还有刷题网站可以练习,面向对象这种开放...

3198

扫码关注云+社区