更新记录

1.0.0(2020-12-27)

基于https://ext.dcloud.net.cn/plugin?id=2553提供的通知栏修改而来,同时参考了uViewUI的NoticeBar的圆角功能。本来是写建议给作者的,但作者没反馈就将自己的增强版发上来,希望原作者和uViewUI组件越来越好,由于我横版,就上传横版截图了,竖版自己可以测试

一、布局自适应

对样式部分进行了修改,大小全部由em来适应。其实我发现自适应有两种表现,一种就是适应设备,即是rpx、vw、vh等,另一种是适应容器,即em、auto和百分比。整体布局应该依据前者,而组件最好依赖后者。

二、赋值自适应

扩展了原组件支持px、rpx、百分比和auto,现在已经支持em、vw、vh、vmax、vmin。如果是数组则单位默认是rpx

参数名 类型 默认值 说明 可选值
width String\/Number 100% 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -
height String\/Number 100% 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -
font-size String/ Number 0.7em 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -

颜色扩展支持rgb()、十六进制#ff0000和关键字赋值

参数名 类型 默认值 说明 可选值
noticeColor HexColor\RgbColor\String 和color同色 通知图标颜色,rgb()、#ff0000和white关键字均可 -
color HexColor "#f5a300" 通告栏的整体颜色,不能使用rgb(r,g,b) -
bgColor HexColor\RgbColor\String color减淡85% 通告栏的背景颜色rgb()、#ff0000和white关键字均可 -

三、修改某些常用默认设置,减少设置次数

参数名 类型 默认值 说明 可选值
show-more Boolean false 是否显示查看更多图标 true|false

四、增强设置圆角的功能

参数名 类型 默认值 说明 可选值
circle-angle Boolean false 是否显示圆角 true|false

平台兼容性

原文网址 https://ext.dcloud.net.cn/plugin?id=2553

NoticeBar通告栏(原文)

支持水平、垂直两个方向的通告栏组件

更新记录

1.0.0(2020-08-18)

支持水平、垂直两个方向的通告栏

一、使用说明

  1. 解压下载的压缩包,将组件放在项目的components目录下

  2. 引用组件

<wyb-noticeBar :text="['黑夜赐予我做梦的权利', '让我某一刻相信', '有不尽的晨曦', '会爬过脚下的土地']" />
  1. Demo体验地址:http://m.wybfiles.cn:82(请用手机访问,或用桌面浏览器启动手机调试模式)

  2. 如果觉得我的插件还不错,可以下载我的插件的示例集合Demo => 传送门,里面有我全部的插件以及全部插件的示例工程

二、参数说明

  1. Props

    1-1. 整体参数

参数名 类型 默认值 说明 可选值
type String "hori-connect" 通告栏的滚动方向与动画类型 hori-connect:水平衔接/hori-break:水平不衔接/vert:垂直滚动
width String\/Number 屏宽 通告栏的宽度(单位:px,内部转化为rpx,无需担心自适应问题) -
height String\/Number 70 通告栏的高度(单位:rpx) -
color HexColor "#f5a300" 通告栏的整体颜色,不能使用rgb(r,g,b) -
bgColor HexColor\RgbColor color减淡85% 通告栏的背景颜色 -
text Array - 通告栏显示的文字,数组形式。hori-connect:数组中的所有元素一行显示。vert & hori-break:数组按元素一个一个显示 -
font-weight String normal 通告栏文字的粗细,同css 100~900,normal,bold,bolder
font-size String/ Number 27 通告栏文字字体大小(单位:rpx) -
has-border Boolean flase 通告栏是否有边框 true|false
scroll Boolean true 通告栏是否滚动 true|false
show-icon Boolean true 是否显示通知图标 true|false
show-more Boolean true 是否显示查看更多图标 true|false
show-close Boolean false 是否显示关闭图标 true|false
url String - 点击查看更多时要跳转的url,相对/绝对路径均可 -
extend-more-area Boolean flase 点击文字部分是否同样触发查看更多事件 true|false
1-2. hori-connect专用参数
参数名 类型 默认值 说明 可选值
join String 4个空格 连接text数组元素的字符串 -
space-const Number 0 每次重复出现的间隔常数 。=0 时代表前一次刚消失,下一次就出来;<0 时代表前一次还没消失,下一次就出来;>0时代表前一次结束后,过一会儿下一次才出来 -
speed Number 40 文字滚动速度(单位:px/s) -
1-3. vert & hori-break专用参数
参数名 类型 默认值 说明 可选值
time Number 3000 每次切换后的停留时间(单位:ms) -
duration Number 1000 每次切换时的动画时间(单位:ms) -

三、其他说明

  1. 图标都关掉,可以当跑马灯用;
  2. hori-connect是用@keyframes关键帧动画实现的。vert和hori-break是封装了uni-app官方的swiper组件实现的,swiper里面只有两个swiper-item,数组元素是动态切换上去轮播的,不会有太大的渲染量

修改和增强(吾逍遥 2020-12-27)

1、改进的由来

目前使用了uniUI和uViewUI两个系列组件,感觉最大问题一是他们都是优先考虑竖版,另一个就是几乎所有组件的通病,就是使用内部使用rpx定义尺寸导致不灵活,在PHP中文十三期培训中学习了父级影响子元素的两类单位:

  • em与rem 通过em特殊的特性(font-size继承父级,本身margin、padding等不可继承属性则依据本身)来定义内部组件的margin、padding、position等。
  • 百分比 百分比通常定义width和height,再一个如背景图backgroud-size是依据块的大小来定义的,想实现 宽高成比例自适应 ,可定义如width:60%;padding-bottom:10%来保证6:1,因为width、padding和margin都是依据父级宽度。具体可查MDN。
  • 单位的自适应。如 rpx、px、数值、em、vw、vh、vmax、vmin和百分比自动适配 ,这里可以参考u-popup.vue中方法getUnitValue

2、修改和增强说明

1、布局自适应

对样式部分进行了修改,大小全部由em来适应。其实我发现自适应有两种表现,一种就是适应设备,即是rpx、vw、vh等,另一种是适应容器,即em、auto和百分比。整体布局应该依据前者,而组件最好依赖后者。

2、赋值自适应

扩展了原组件支持px、rpx、百分比和auto,现在已经支持em、vw、vh、vmax、vmin。如果是数组则单位默认是rpx

参数名 类型 默认值 说明 可选值
width String\/Number 100% 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -
height String\/Number 100% 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -
font-size String/ Number 0.7em 增强识别em、vw、vh、vmax、vmin等字符串,若是数值时默认单位是rpx -

颜色扩展支持rgb()、十六进制#ff0000和关键字赋值

参数名 类型 默认值 说明 可选值
noticeColor HexColor\RgbColor\String 和color同色 通知图标颜色,rgb()、#ff0000和white关键字均可 -
color HexColor "#f5a300" 通告栏的整体颜色,不能使用rgb(r,g,b) -
bgColor HexColor\RgbColor\String color减淡85% 通告栏的背景颜色rgb()、#ff0000和white关键字均可 -

3、修改某些常用默认设置,减少设置次数

参数名 类型 默认值 说明 可选值
show-more Boolean false 是否显示查看更多图标 true|false

4、增强设置圆角的功能

参数名 类型 默认值 说明 可选值
circle-angle Boolean false 是否显示圆角 true|false

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问