小程序-公告滚动

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,
},
相关推荐
说私域4 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序:分享经济时代的技术赋能与模式创新
人工智能·小程序·开源
低代码布道师4 小时前
医疗小程序05我的就诊卡
低代码·小程序
阿拉斯加的头头儿6 小时前
小程序下载图片问题处理
小程序
一 乐10 小时前
校园墙|校园社区|基于Java+vue的校园墙小程序系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·小程序
LXA080911 小时前
在 UniApp 中为小程序实现视频播放记录功能
小程序·uni-app·音视频
老罗-Mason13 小时前
Apache Flink运行环境搭建
python·flink·apache
HashData酷克数据13 小时前
Apache Cloudberry 孵化报告(202508-202510)
apache
千寻技术帮15 小时前
50015_基于微信小程序的红色旅游系统
微信小程序·小程序·源码·ppt·项目文档
sg_knight15 小时前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
2501_9160074719 小时前
iOS性能调试工具终极指南,从系统底层到多端协同的全方位优化实践(2025版)
android·ios·小程序·https·uni-app·iphone·webview