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


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 相关文章推荐
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
微信小程序实现吸顶效果
Jan 08 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
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Javascript之String对象详解
2016/06/08 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
演讲稿怎么写
2014/01/07 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
人力资源求职信
2014/05/25 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年底工作总结范文
2015/05/15 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技