脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序实现滚动消息

微信小程序实现滚动消息通知

 更新时间：2018年02月02日 10:38:23   作者：xiaochun365  
这篇文章主要为大家详细介绍了微信小程序实现滚动消息通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现滚动消息的具体代码，供大家参考，具体内容如下

效果图：

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript深入V8引擎以及编写优化代码的5个技巧

    JavaScript深入V8引擎以及编写优化代码的5个技巧

    这篇文章主要介绍了JavaScript深入V8引擎以及编写优化代码的5个技巧,JavaScript引擎是执行 JavaScript 代码的程序或解释器。JavaScript引擎可以实现为标准解释器，或者以某种形式将JavaScript编译为字节码的即时编译器。,需要的朋友可以参考下
    2019-06-06
  • 基于JavaScript实现交互式博客

    基于JavaScript实现交互式博客

    在Web开发中,JavaScript（JS）是一种至关重要的编程语言,它使网页具有交互性,本文主要介绍了如何使用JavaScript实现一个交互式博客,需要的可以了解下
    2024-01-01
  • JavaScript数据结构之二叉树的计数算法示例

    JavaScript数据结构之二叉树的计数算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的计数算法,结合具体实例形式分析了javascript二叉树记录更新次数的原理与操作技巧,需要的朋友可以参考下
    2017-04-04
  • js 创建对象 经典模式全面了解

    js 创建对象 经典模式全面了解

    下面小编就为大家带来一篇js 创建对象 经典模式全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript代码调试方法实例小结

    JavaScript代码调试方法实例小结

    这篇文章主要介绍了JavaScript代码调试方法,结合实例形式总结分析了JavaScript错误信息的处理与代码调试相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript模拟实现简单的MVC的示例详解

    JavaScript模拟实现简单的MVC的示例详解

    MVC是一种常见的软件架构模式，MVC模式的目的是将应用程序的数据、用户界面和控制逻辑分离，提高代码的可维护性，可拓展性和可重用性。本文就来用用JS模拟实现一个简单的MVC吧
    2023-04-04
  • JS实现transform实现扇子效果

    JS实现transform实现扇子效果

    这篇文章主要为大家详细介绍了JS实现transform实现扇子效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript实现网页电子时钟

    JavaScript实现网页电子时钟

    这篇文章主要为大家详细介绍了JavaScript实现网页电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 如何基于webRTC实现人脸识别功能

    如何基于webRTC实现人脸识别功能

    WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等,涵盖了音视频处理和传输的方方面面,下面这篇文章主要给大家介绍了关于如何基于webRTC实现人脸识别的相关资料,需要的朋友可以参考下
    2022-12-12
  • bootstrap timepicker在angular中取值并转化为时间戳

    bootstrap timepicker在angular中取值并转化为时间戳

    这篇文章主要介绍了bootstrap timepicker在angular中取值并转化为时间戳的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论