微信小程序实现滚动消息通知
2019/6/27 20:26:42
本文主要是介绍微信小程序实现滚动消息通知,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例为大家分享了微信小程序实现滚动消息的具体代码,供大家参考,具体内容如下
效果图:
index.wxml
<!--index.wxml--> <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <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>
index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { }, onLoad(e) { console.log(e.title) this.setData({ msgList: [ { url: "url", title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" }, { url: "url", title: "交了20多年的国内漫游费将取消 你能省多少话费?" }, { url: "url", title: "北大教工合唱团出国演出遇尴尬:被要求给他人伴唱" }] }); } })
index.wxss
/**index.wxss**/ .swiper_container { background-color: red; height: 50rpx; width: 80vw; } .swiper_item { font-size: 30rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于微信小程序实现滚动消息通知的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-19如何设置Vuex管理用户的登录和退出数据操作-icode9专业技术文章分享
- 2024-09-19如何给微信云函数下载package.json 中列出的所有依赖-icode9专业技术文章分享
- 2024-09-19Vue3全家桶资料:初学者入门教程与实战指南
- 2024-09-19Vue3资料:初学者快速入门指南
- 2024-09-19Vue资料:初学者必备的入门指南与实用资源
- 2024-09-19Vue3全家桶资料:初学者必备的入门教程与实践指南
- 2024-09-19Vue3 资料指南:快速入门与实战技巧
- 2024-09-19Vue资料指南:为初学者量身打造的前端框架入门教程
- 2024-09-19Vue3入门教程:快速启动与基本组件创建
- 2024-09-19Vue3学习:从零基础到实战的快速入门指南