微信小程序-滚动消息通知效果
来源:互联网 发布:中国邮政数据传媒中心 编辑:程序博客网 时间:2024/06/06 04:41
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用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 0
- 微信小程序-滚动消息通知效果
- 微信小程序 滚动消息通知
- 【小程序】微信小程序-滚动消息通知
- android滚动通知的效果
- 仿魅族手机消息通知效果
- TextView上下滚动实现通知效果
- 模仿 (微信)消息通知效果
- Dojo JavaScript实现消息滚动出现效果
- 微信小程序滚动到某个位置改变效果
- java 通知跑马灯效果 (文字滚动)
- 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
- 仿UC客户端的快速搜索消息通知效果
- Android 通知消息水平播放、无限循环效果实现
- [JS效果]无间断滚动程序
- 微信小程序Form通知
- 实现类似天猫列表消息自动垂直滚动效果
- 微信小程序滚动区域
- 微信小程序上下滚动
- 欢迎使用CSDN-markdown编辑器
- MongoDB七(索引)
- SPOJ ORDERSET Order statistic set 简单平衡树 或 树状数组
- mac mysql 以及重置密码
- Pots--(dfs)
- 微信小程序-滚动消息通知效果
- Python_11
- C++变量存储类型与标识符生命期
- UVa1600 习题6-5 巡逻机器人 (Patrol Robot,ACM/ICPC Hanoi 2006)
- 基于模板匹配的字符识别(Matlab) 字符识别模板匹配方法
- JavaScript基础学习
- MST 最小生成树
- androidstudio报错之Java.lang.NoClassDefFoundError: de.greenrobot.event.EventBus
- 【JavaScript】我的第6个例子;代码块