小程序中公告消息自动向左滚动（关闭三次之后不再提示公告信息）

 

 

 

<!-- 消息提醒 -->
<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
        　　　　});
　　　　　}
    })
}