微信小程序-滚动消息通知的实例代码


Posted in Javascript onAugust 03, 2017

写在前面: 

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

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

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

从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈...

wxml

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <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>

wxss

.swiper_container {
 height: 55rpx;
 width: 80vw;
}

.swiper_item {
 font-size: 25rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 letter-spacing: 2px;
} 

Js

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

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

效果

微信小程序-滚动消息通知的实例代码

写在后面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
老生常谈js数据类型
Aug 03 #Javascript
详解JavaScript按概率随机生成事件
Aug 02 #Javascript
angular中的cookie读写方法
Aug 02 #Javascript
You might like
MySQL修改密码方法总结
2008/03/25 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JS 判断代码全收集
2009/04/28 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
详解Python中的type()方法的使用
2015/05/21 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
中秋手机店促销方案
2014/06/16 职场文书
三八节标语
2014/06/27 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
财务工作失职检讨书
2014/11/21 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
保管员岗位职责
2015/02/14 职场文书
python中print格式化输出的问题
2021/04/16 Python