小程序-公告滚动

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,
},
相关推荐
dreams_dream2 天前
微信小程序:页面事件-上拉触底
微信小程序·小程序
wafrdggh3 天前
2026电商快递批量查询怎么用?固乔助手模板设置评测
大数据·数据库·小程序
wafrdggh4 天前
2026 商城小程序平台哪个价格合理?把跨境附加成本这个坑算透
大数据·小程序
恩创软件开发6 天前
自助KTV系统管理员续单功能
经验分享·小程序
AI源码8 天前
在线考试小程序
小程序·notepad++
2501_916008898 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
云-缩影9 天前
做微信小程序,自建服务器还是用云托管:技术选型对比
服务器·微信小程序·小程序
源图客9 天前
Apache Flink 2.3.0(最新版本)
大数据·flink·apache
超级新零售10 天前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
xiezhr10 天前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy