小程序-公告滚动

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,
},
相关推荐
不如摸鱼去8 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
Riu_Peter10 小时前
【记录】Apache SeaTunnel 系统监控信息
apache
喂完待续16 小时前
【Tech Arch】Hive技术解析:大数据仓库的SQL桥梁
大数据·数据仓库·hive·hadoop·sql·apache
SelectDB17 小时前
5000+ 中大型企业首选的 Doris,在稳定性的提升上究竟花了多大的功夫?
大数据·数据库·apache
weixin_lynhgworld18 小时前
剧本杀小程序系统开发:构建剧本杀社交新生态
小程序
说私域18 小时前
基于定制开发开源 AI 智能名片 S2B2C 商城小程序的热点与人工下发策略研究
人工智能·小程序
weixin_lynhgworld18 小时前
陪诊小程序系统开发:让就医不再是一件难事
小程序
喂完待续1 天前
Apache Hudi:数据湖的实时革命
大数据·数据仓库·分布式·架构·apache·数据库架构
weixin_lynhgworld2 天前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld2 天前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序