• 技术文章 >web前端 >js教程

    在微信小程序中如何实现滚动消息通知

    亚连亚连2018-06-08 11:38:06原创1207
    这篇文章主要为大家详细介绍了微信小程序实现滚动消息通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

    效果图:

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

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    在vue中如何实现页面加载进度条组件

    javascript该如何实现获取日期段内每天不同的价格

    在vue中如何实现图片loading组件

    以上就是在微信小程序中如何实现滚动消息通知的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:在微信小程序中如何实现文字跑马灯效果 下一篇:在微信小程序中如何使用YDUI的ScrollTab组件
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 一起聊聊JavaScript函数的定义与基本使用• 详解如何使用Node.js开发一个简单图片爬取功能• JavaScript中的数组知识点总结• JavaScript怎么创建多个对象?详解四种方法• JavaScript DOM API知识串讲
    1/1

    PHP中文网