zoukankan      html  css  js  c++  java
  • 小程序中公告消息自动向左滚动(关闭三次之后不再提示公告信息)

     

    <!-- 消息提醒 -->
    <view class='news' wx:if="{{newsShow && newCount && isEmpty}}">
        <view class='iconfont icon-xiaolaba news-tips'></view>
        <view class='news-desc'>
            <view id='news-desc-roll' class='news-desc-roll' style='animation: roll linear {{news.duration}}s infinite;'>{{news.text}}</view>
        </view>
        <view class='news-close' bindtap='bindtapNewClose'>x</view>
    </view>

    样式如下:

    /* 公告消息 */
    .news-desc {
        width: 600rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 10rpx 0;
        overflow: hidden;
    }
    .news-desc-roll {
        height: 60rpx;
        font-size: 30rpx;
        white-space: nowrap;
        line-height: 60rpx;
        color: #81ddd0;
        /* animation:roll 20s linear infinite; */
    }
     @keyframes roll {
      0% {margin-left:700rpx;}
      100% {margin-left:-200%;}  /* -200%将文字全部隐藏 */
    }
    .news-close {
        width: 50rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 10rpx 0;
        text-align: center;
        font-size: 30rpx;
    }    

    js文件

    //使用❌,需要在data中添加如下信息:
      data:{
        newsShow:true,
        newCount:0,
        isEmpty:false,  //为false表示内容为空
      },
     onLoad(){ 
        let newCount = wx.getStorageSync('newCount')
        if (newCount == -1){return;}
        if (newCount){
          this.setData({ newCount: newCount})
        }else{
          // 初始化
          wx.setStorageSync('newCount',3)
          this.setData({ newCount: 3 })
        }
        this.getNews();
     }

    //
    关闭news bindtapNewClose:function(){ let newCount = this.data.newCount; if(newCount >= 1){ newCount = --newCount; this.setData({ newCount: newCount}) if (newCount == 0){ wx.setStorageSync('newCount', -1) }else{ wx.setStorageSync('newCount', newCount) } } this.setData({newsShow:false}); //为true时显示 }, getNews:function(){ let that = this; app.request.wxRequest({ url:'news' }).then(res=>{ let news = res.data.data; let news_toString = '';
          if (news.length){
                for(let item in news){
                    news_toString += item + '.' + news[item] + '   ';
                }
                that.setData({
               isEmpty:true,     [
    'news.duration']:10,     ['news.text']: news_toString     });
         } }) }
  • 相关阅读:
    【转】QT中添加的资源文件qrc时的路径问题小结
    【转】Qt 资源图片删除后,错误 needed by `debug/qrc_image.cpp'. Stop. 的终极解决办法
    普通类型与自定义类型之间的转化
    快速实现python c扩展模块
    关于解决python线上问题的几种有效技术
    OpenGL超级宝典笔记----渲染管线
    读python源码--对象模型
    python与c互相调用
    OpenGL超级宝典笔记----框架搭建
    python笔记(持续更新)
  • 原文地址:https://www.cnblogs.com/cap-rq/p/9994245.html
Copyright © 2011-2022 走看看