小程序-公告滚动

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 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck8 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23410 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟10 小时前
小程序跳转另一个小程序
小程序
14 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
17 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji17 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域19 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
说私域19 小时前
传统媒体终端移动化发展新趋势:融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售
DK七七19 小时前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp