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


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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
angular共享依赖的解决方案分享
Oct 15 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
source.php查看源文件
2006/12/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
基于Django用户认证系统详解
2018/02/21 Python
python绘制圆柱体的方法
2018/07/02 Python
python实现汽车管理系统
2018/11/30 Python
python中必要的名词解释
2019/11/20 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
2014全国两会心得体会
2014/03/17 职场文书
教师读书活动总结
2014/05/07 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
关于责任的演讲稿
2014/05/20 职场文书
医院合作协议书
2014/08/19 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
少先队工作总结2015
2015/05/13 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP