郑州网站建设模板,wordpress主题c7v5 v2.0,网站ui设计公司,南昌校园文化设计公司目录
#平台差异说明
#基本使用
#配置主题
#配置图标
#配置滚动速度
#控制滚动的开始和暂停
#事件回调
#API
#Props
#Events 该组件用于滚动通告场景#xff0c;有多种模式可供选择
#平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√…
目录
#平台差异说明
#基本使用
#配置主题
#配置图标
#配置滚动速度
#控制滚动的开始和暂停
#事件回调
#API
#Props
#Events 该组件用于滚动通告场景有多种模式可供选择
#平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√
#基本使用
通过list数组参数设置需要滚动的内容滚动mode参数有两种模式分别是horizontal水平滚动vertical垂直滚动。其中水平滚动又可以通过is-circular来配置是衔接滚动(true)还是步进滚动(false) 衔接滚动滚动会把list数组元素拼接成一个字符串形式进行滚动步进滚动模式类似轮播图水平滚动的形式具体效果请见实例
templateviewu-notice-bar modehorizontal :listlist/u-notice-baru-notice-bar modehorizontal :is-circularfalse :listlist/u-notice-baru-notice-bar modevertical :listlist/u-notice-bar/view
/templatescriptexport default {data() {return {list: [寒雨连江夜入吴,平明送客楚山孤,洛阳亲友如相问,一片冰心在玉壶]}}}
/script#配置主题
通过type参数可以配置5种主题即primary、warning(默认)、error、info、success、none
说明none主题默认没有背景颜色
u-notice-bar typeerror :listlist/u-notice-bar#配置图标
volume-icon参数配置是否显示左侧的音量小喇叭图标默认显示more-icon配置是否显示右侧的向右箭头默认关闭close-icon配置是否显示关闭的图标默认关闭
u-notice-bar :volume-iconfalse :listlist/u-notice-baru-notice-bar :more-icontrue :listlist/u-notice-baru-notice-bar :close-icontrue :listlist/u-notice-bar#配置滚动速度
mode为vertical(垂直滚动)或者mode为horizontal且is-circular为false时两者都可视为步进滚动此时通过duration设置滚动周期时长mode为horizontal且is-circular为true时可视为水平衔接滚动此时uView加入了一个滚动因子参数可确保在任意多内容情况下滚动速度恒定不变 可通过speed参数配置每秒滚动的距离单位为rpx
u-notice-bar :modevertical :duration1500 :listlist/u-notice-baru-notice-bar :modevertical :is-circularfalse :duration1500 :listlist/u-notice-baru-notice-bar :modevertical :is-circulartrue :speed200 :listlist/u-notice-bar#控制滚动的开始和暂停
autoplay参数默认为true控制是否自动播放滚动通告play-state参数为paused滚动会暂停为play滚动继续播放
u-notice-bar :autoplaytrue play-statepaused :listlist/u-notice-bar#事件回调
more-icon参数为true时点击向右图标会回调一个getMore事件close-icon参数为true时点击关闭箭头图标会触发一个close事件点击通告栏的文字时会触发click事件回调参数为当前文字所在list数组参数的索引值
#API
#Props
参数说明类型默认值可选值list滚动内容数组形式见上方说明Array--type显示的主题Stringwarningprimary / info / error / success / nonevolume-icon是否显示小喇叭图标Booleantruefalsemore-icon是否显示右边的向右箭头Booleanfalsetrueclose-icon是否显示关闭图标Booleanfalsetrueautoplay是否自动播放Booleantruefalsecolor文字颜色String--bg-color背景颜色String | Number--mode滚动模式Stringhorizontal(水平滚动)vertical(垂直滚动)show是否显示Booleantruefalsevolume-size左边喇叭的大小String | Number34-font-size字体大小单位rpxString | Number28-duration滚动周期时长只对步进模式有效横向衔接模式无效单位msString | Number2000-speed水平滚动时的滚动速度即每秒移动多少距离只对水平衔接方式有效单位rpxString | Number160-is-circularmode为horizontal时指明是否水平衔接滚动Booleantruefalseplay-state播放状态play - 播放paused - 暂停Stringplaypauseddisable-touch是否禁止通过手动滑动切换通知只有mode vertical或者mode horizontal且is-circular false时有效只支持App 2.5.5、H5 2.5.5、支付宝小程序、字节跳动小程序Booleantruefalsepadding内置滚动通知的内边距字符串类似16rpx 20rpxString18rpx 24rpx-border-radius圆角值单位rpxString \ Number0-no-list-hiddenlist为空数组时是否显示组件Booleantruefalse
#Events
详细解释见上方说明
事件名说明回调参数版本click点击通告文字触发只有mode vertical或者mode horizontal且is-circular false时有效index当前文字所在list数组的索引值-close点击右侧关闭图标触发--getMore点击右侧向右图标触发--end列表的消息每次被播放一个周期时触发只有mode vertical或者mode horizontal且is-circular false时有效--
