脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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;
}

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

您可能感兴趣的文章:

相关文章

  • 完全深入学习Bootstrap表单

    完全深入学习Bootstrap表单

    Bootstrap表单用来与用户做交流的一个网页控件，实现网页与用户更好的沟通，这篇文章主要就为大家介绍了Bootstrap表单中常见的元素,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js利用Array.splice实现Array的insert/remove

    js利用Array.splice实现Array的insert/remove

    从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
    2009-01-01
  • js 数组实现一个类似ruby的迭代器

    js 数组实现一个类似ruby的迭代器

    今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少。
    2009-10-10
  • ionic js 复选框 与普通的 HTML 复选框到底有没区别

    ionic js 复选框 与普通的 HTML 复选框到底有没区别

    本文通过实例给大家演示ionic js 复选框 与普通的 HTML 复选框到底有没区别的相关知识，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • JavaScript中var的重要性实例分析

    JavaScript中var的重要性实例分析

    这篇文章主要介绍了JavaScript中var的重要性,结合实例形式分析了javascript变量定义、作用范围、作用域及相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • 不用AI也能实现的文字自动播报(SpeechSynthesis文本实例合成)

    不用AI也能实现的文字自动播报(SpeechSynthesis文本实例合成)

    SpeechSynthesis是HTML5的一个新特性，基于SpeechSynthesis可以实现在客户浏览器端进行动态文本的语音合成播放，这篇文章主要介绍了不用AI也能实现的文字自动播报(SpeechSynthesis文本实例合成),需要的朋友可以参考下
    2023-03-03
  • 用js实现小球的自由移动代码

    用js实现小球的自由移动代码

    本篇文章小编为大家介绍，用js实现小球的自由移动代码。需要的朋友参考下
    2013-04-04
  • JavaScript中FontFace对象的使用方式

    JavaScript中FontFace对象的使用方式

    这篇文章主要介绍了JavaScript中FontFace对象的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 基于Bootstrap使用jQuery实现简单可编辑表格

    基于Bootstrap使用jQuery实现简单可编辑表格

    这篇文章主要介绍了基于Bootstrap使用jQuery实现简单可编辑表格的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript实现图片预加载的方法总结

    JavaScript实现图片预加载的方法总结

    在Web前端开发中,图片是网页内容的重要组成部分,但它们的加载时间往往会影响页面的整体性能,为了提升用户体验,减少等待时间,开发者通常会采用图片预加载（Image Preloading）技术,本文给大家介绍了JavaScript实现图片预加载的方法总结,需要的朋友可以参考下
    2024-12-12

最新评论