【小程序】滚动的公告栏

公告栏的展示方式一般是有两种:

垂直方向滚动式
水平方向滚动式

【垂直式公告栏】
原理：运用了小程序自带的swiper来实现
适用范围：信息量短或可跳转详情的多条公告消息。

// 数据：noticeList: [{content: '公告1',}, {content: '公告2',}, {content: '公告3',}, {content: '公告4~~~~~~~~~~~~~~~~~~~',}],// 布局：<view class="verticality_box"><swiper class="notice_verticality" autoplay="true" vertical="true" circular="true" interval="2000" display-multiple-items='1'><block wx:for="{{noticeList}}"><swiper-item><view class="noticecont">{{item.content}}</view></swiper-item></block></swiper></view>// 样式：
.verticality_box {width: 100%;margin: 10px auto;
}.notice_verticality {width: 100%;height: 50rpx;line-height: 50rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.noticecont {width: calc(100vw - 20px);line-height: 50rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

【水平式公告栏】
原理：跑马灯
适用范围：单条数据为最佳

数据：noticeList: [{content: '公告1',}, {content: '公告2',}, {content: '公告3',}, {content: '公告4~~~~~~~~~~~~~~~~~~~',}],// 水平滚动数据scrollData: {speed: 5, //滚动速度，每秒5个字font_size: "16", //字体大小(px)text_color: "#de8c17", //字体颜色back_color: "#fffbe8", //背景色}布局：
<view class="horizontal_box"><view class='marquee_text' style='--marqueeWidth--:{{-scrollData.width}}px;--speed--:{{scrollData.time}}s;width:{{scrollData.width_mal}}px;'><block wx:for="{{noticeList}}" wx:key='index'><view class="notice_cont" style='color:{{scrollData.text_color}};'>{{item.content}}</view></block></view></view>样式：
@keyframes around {from {margin-left: 100%;}to {margin-left: var(--marqueeWidth--);}
}.horizontal_box {position: relative;width: 100%;margin: 10px auto;height: 50rpx;line-height: 50rpx;overflow: hidden;
}.marquee_text {width: 100%;display: flex;white-space: nowrap;animation-name: around;animation-duration: var(--speed--);animation-iteration-count: infinite;animation-timing-function: linear;line-height: 50rpx;
}.marquee_tit {height: 50rpx;line-height: 50rpx;position: absolute;padding-left: 22rpx;
}
.notice_cont{margin-right: 20px;
}//  方法(重点):// 水平方向 公告栏noticeEvent() {let noticeList = this.data.noticeList,scrollData = this.data.scrollData,this_width = 0,spacing = 0,speed = (this.data.scrollData.speed * this.data.scrollData.font_size); //m每秒行走的距离for (let i in noticeList) {if (noticeList[i].content) {this_width += noticeList[i].content.length * this.data.scrollData.font_size + 20;} else {noticeList[i].content = ''}}let total_length = this_width;//总长scrollData.time = total_length / (speed / 2.5 ); /**滚动时间*/scrollData.width = total_length - wx.getSystemInfoSync().windowWidth;// 如果公告内容少，则不滚动if(total_length<= wx.getSystemInfoSync().windowWidth){scrollData.time = 0}this.setData({scrollData: scrollData,noticeList: noticeList})},

【小程序】滚动的公告栏相关推荐

小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
小程序滚动切换页码组件
以下是基于小程序wux框架中refresh组件拓展的小程序滚动切换页码组件. 用法 <page-list id="wux-refresher" elid="bidd ...
微信小程序滚动播放内容
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
1、使用colorui制作小程序滚动广告栏
使用colorui制作小程序滚动广告栏我们可以使用colorui组件开发小程序,能够很容易的写出广告栏. <template><view><view class=&qu ...
用wepy写的一个关于小程序通知栏（公告栏）上下滚动效果实现
说明页面需要在顶部实现一个通知栏上下滚动的效果,对一些比较动态的信息做一个展示,一个比较实用的一个小效果. 其主要核心思路是利用了动画的原理,实现效果的平滑实现. 代码实现 wxml部分 <v ...
微信小程序滚动选项卡 swiper高度自适应
最近做小程序的时候遇到了swiper高度的问题,swiper里面的内容可以根据数据来自适应高度.那就给scroll-view计算一下高度 wxml <view class="conta ...
微信小程序-滚动消息通知
写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左 ...
记录一次小程序滚动穿透解决方案
场景描述: 自定义的小程序弹窗中存在列表滚动,手机操作时发现有滚动穿透现象个人觉得一个比较好用的方法====>: 底层页面使用scroll-view组件包裹,设置垂直滚动,高度设置为屏幕高度, ...
小程序滚动事件相关总结
1.有时候我们需要每次进入页面都是回到页面的顶部的这时候可以用 : wx.pageScrollTo({scrollTop: 0,duration: 300 }) 这其实跟其他技术路由跳转设置每次都从顶 ...
微信小程序滚动列表（无限滚动）
效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:aut ...

【小程序】滚动的公告栏

【小程序】滚动的公告栏相关推荐

最新文章

热门文章