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

 

 

 

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

 

转载于:https://www.cnblogs.com/cap-rq/p/9994245.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页