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

写在前面：　

　　这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用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函数的主要作用是将数据从逻辑层发送到视图层，但是需要避免单次设置大量的数据。

　　效果

转载于:https://www.cnblogs.com/dalulu/p/9443573.html

微信小程序-滚动消息通知相关推荐

微信小程序下发消息通知
话不多说,先熟悉微信小程序官网操作逻辑实现:(别搞错了!) https://developers.weixin.qq.com/miniprogram/dev/framework/open-abilit ...
微信小程序实战——消息通知界面
先给大家上一个实战的效果图这个是我们小组在开发的一个消息界面,用于实现简单的交流通信功能,只实现了简单的前端框架,下面献上代码供大家参考学习,若有不足,请多多指教. wxml部分 <!--头部 ...
【Node.js】实现微信小程序订阅消息推送功能
实战项目名称:实现微信小程序订阅消息通知文章目录一.实战步骤 1. 登录微信小程序管理端,添加订阅消息模板 2. 定义好需要发送的消息 3.获取小程序的access_token 4. 发起请求,向 ...
微信小程序模板消息（服务通知消息）原始post工具封装(不使用jar包--坑比较多)，解决47001(JSON格式)和中文乱码问题
微信小程序模板消息(服务通知消息)原始post工具封装(不使用jar包--坑比较多),解决47001(JSON格式)和中文乱码问题参考文章: (1)微信小程序模板消息(服务通知消息)原始post工具 ...
微信小程序之发送通知消息（通过openid推送消息给用户）
微信小程序之发送通知消息(通过openid推送消息给用户) 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的ac ...
微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
微信小程序模板消息群发、无限制推送相关讲解
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
微信小程序开发—消息推送
微信小程序的消息推送简单的说就是发送一条微信通知给用户,用户点开消息可以查看消息内容,可以链接进入到小程序的指定页面. 微信小程序消息推送需要用户触发动作才能发送消息,比如用户提交订单.支付成功.一次 ...
【微信小程序】消息推送服务器配置及服务器域名配置（记录坑）
我最近想在微信小程序推送通知,于是开始学怎么弄模板消息. 首先要配置服务器域名和消息推送配置. 先配置服务器域名吧,这个简单. 配置服务器域名首先进入小程序后台>>开发>>开 ...

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

写在前面：

wxml

wxss

Js

效果

微信小程序-滚动消息通知相关推荐

最新文章

热门文章