小程序-公告滚动

html 复制代码
<view class="bg_box icon_nav_box" style="margin-top: -70rpx;position: relative;">
    <view class="flex flex_y_center">
            <view class="c_red f32" style="font-style: italic;flex-shrink:0 ;">最新公告</view>
            <view class="c_colum" style="line-height: 60rpx;height: 60rpx;overflow-y: hidden;position: relative;"> 
              <view class="notice_main" style="top: {{notice_top}}rpx;">
              <block wx:for="{{notice_list}}">
                <view  class="ml15 lineText">{{item.title}}</view>
              </block>
              </view>
            </view>
    </view>
</view>


.icon_nav_box .item{flex: 1;}
.icon_nav_box .icon{width: 100rpx;}
javascript 复制代码
noticeScoll(){//公告滚动
    let that = this;
    let curindex = 0;
    setInterval(() => {
      let top = that.data.notice_top;
      let notice_list = that.data.notice_list;
      if(curindex < notice_list.length-1){
        curindex = curindex+1;
        that.setData({
          notice_top: top - 60
        })
      }else{
        curindex = 0;
        that.setData({
          notice_top: 0,
        })
      }
    }, 3000);

  },


 data: {
    notice_list:[
        {title:"商城上线啦农资上线啦1",},
        {title:"商城上线啦农资商城上线啦农资商城上线啦2",},
        {title:"商城上线啦资商城上线啦农资商城上线啦3",},
        {title:"商城上线啦啦农资商城上线啦4",},
        {title:"商城上上线啦5",},
        {title:"商城上线啦农啦农资商城上线啦6",},
    ],
    notice_top:0,
},
相关推荐
说私域1 小时前
开源 AI 智能名片链动 2+1 模式 O2O 商城小程序在社群活动中的应用与时机选择
人工智能·小程序
兮动人2 小时前
错误: 找不到或无法加载主类 org.apache.zookeeper.server.quorum.QuorumPeerMain
分布式·zookeeper·apache
凌晨五点的星2 小时前
网络安全-利用 Apache Mod CGI
apache
金灰3 小时前
wx小程序渗透思路
网络·windows·安全·小程序·notepad++
微刻时光3 小时前
好课程:uni-app实战音频小说app小程序
小程序·uni-app
Zww08914 小时前
uniapp微信小程序用户授权方法
微信小程序·小程序·uni-app
毕设木哥11 小时前
25届计算机毕业设计选题推荐-图书馆智能选座系统
java·spring boot·微信小程序·小程序·毕业设计·课程设计
程序员入门进阶13 小时前
优购电商小程序的设计与实现+ssm(lw+演示+源码+运行)
小程序
人工智能的苟富贵14 小时前
微信小程序中实现类似于 ECharts 的图表渲染及优化
微信小程序·小程序·echarts
一 乐21 小时前
英语学习交流平台|基于java的英语学习交流平台系统小程序(源码+数据库+文档)
java·数据库·vue.js·学习·小程序·源码