u-notice-bar.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <view class="u-notice-bar-wrap" v-if="isShow" :style="{
  3. borderRadius: borderRadius + 'rpx',
  4. }">
  5. <block v-if="mode == 'horizontal' && isCircular">
  6. <u-row-notice
  7. :type="type"
  8. :color="color"
  9. :bgColor="bgColor"
  10. :list="list"
  11. :volumeIcon="volumeIcon"
  12. :moreIcon="moreIcon"
  13. :volumeSize="volumeSize"
  14. :closeIcon="closeIcon"
  15. :mode="mode"
  16. :fontSize="fontSize"
  17. :speed="speed"
  18. :playState="playState"
  19. :padding="padding"
  20. @getMore="getMore"
  21. @close="close"
  22. @click="click"
  23. ></u-row-notice>
  24. </block>
  25. <block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
  26. <u-column-notice
  27. :type="type"
  28. :color="color"
  29. :bgColor="bgColor"
  30. :list="list"
  31. :volumeIcon="volumeIcon"
  32. :moreIcon="moreIcon"
  33. :closeIcon="closeIcon"
  34. :mode="mode"
  35. :volumeSize="volumeSize"
  36. :disable-touch="disableTouch"
  37. :fontSize="fontSize"
  38. :duration="duration"
  39. :playState="playState"
  40. :padding="padding"
  41. @getMore="getMore"
  42. @close="close"
  43. @click="click"
  44. @end="end"
  45. ></u-column-notice>
  46. </block>
  47. </view>
  48. </template>
  49. <script>
  50. /**
  51. * noticeBar 滚动通知
  52. * @description 该组件用于滚动通告场景,有多种模式可供选择
  53. * @tutorial https://www.uviewui.com/components/noticeBar.html
  54. * @property {Array} list 滚动内容,数组形式,见上方说明
  55. * @property {String} type 显示的主题(默认warning)
  56. * @property {Boolean} volume-icon 是否显示小喇叭图标(默认true)
  57. * @property {Boolean} more-icon 是否显示右边的向右箭头(默认false)
  58. * @property {Boolean} close-icon 是否显示关闭图标(默认false)
  59. * @property {Boolean} autoplay 是否自动播放(默认true)
  60. * @property {String} color 文字颜色
  61. * @property {String Number} bg-color 背景颜色
  62. * @property {String} mode 滚动模式(默认horizontal)
  63. * @property {Boolean} show 是否显示(默认true)
  64. * @property {String Number} font-size 字体大小,单位rpx(默认28)
  65. * @property {String Number} volume-size 左边喇叭的大小(默认34)
  66. * @property {String Number} duration 滚动周期时长,只对步进模式有效,横向衔接模式无效,单位ms(默认2000)
  67. * @property {String Number} speed 水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpx(默认160)
  68. * @property {String Number} font-size 字体大小,单位rpx(默认28)
  69. * @property {Boolean} is-circular mode为horizontal时,指明是否水平衔接滚动(默认true)
  70. * @property {String} play-state 播放状态,play - 播放,paused - 暂停(默认play)
  71. * @property {String Nubmer} border-radius 通知栏圆角(默认为0)
  72. * @property {String Nubmer} padding 内边距,字符串,与普通的内边距css写法一直(默认"18rpx 24rpx")
  73. * @property {Boolean} no-list-hidden 列表为空时,是否显示组件(默认false)
  74. * @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知,只有mode = vertical,或者mode = horizontal且is-circular = false时有效(默认true)
  75. * @event {Function} click 点击通告文字触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
  76. * @event {Function} close 点击右侧关闭图标触发
  77. * @event {Function} getMore 点击右侧向右图标触发
  78. * @event {Function} end 列表的消息每次被播放一个周期时触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效
  79. * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
  80. */
  81. export default {
  82. name: "u-notice-bar",
  83. props: {
  84. // 显示的内容,数组
  85. list: {
  86. type: Array,
  87. default() {
  88. return [];
  89. }
  90. },
  91. // 显示的主题,success|error|primary|info|warning
  92. type: {
  93. type: String,
  94. default: 'warning'
  95. },
  96. // 是否显示左侧的音量图标
  97. volumeIcon: {
  98. type: Boolean,
  99. default: true
  100. },
  101. // 音量喇叭的大小
  102. volumeSize: {
  103. type: [Number, String],
  104. default: 34
  105. },
  106. // 是否显示右侧的右箭头图标
  107. moreIcon: {
  108. type: Boolean,
  109. default: false
  110. },
  111. // 是否显示右侧的关闭图标
  112. closeIcon: {
  113. type: Boolean,
  114. default: false
  115. },
  116. // 是否自动播放
  117. autoplay: {
  118. type: Boolean,
  119. default: true
  120. },
  121. // 文字颜色,各图标也会使用文字颜色
  122. color: {
  123. type: String,
  124. default: ''
  125. },
  126. // 背景颜色
  127. bgColor: {
  128. type: String,
  129. default: ''
  130. },
  131. // 滚动方向,horizontal-水平滚动,vertical-垂直滚动
  132. mode: {
  133. type: String,
  134. default: 'horizontal'
  135. },
  136. // 是否显示
  137. show: {
  138. type: Boolean,
  139. default: true
  140. },
  141. // 字体大小,单位rpx
  142. fontSize: {
  143. type: [Number, String],
  144. default: 28
  145. },
  146. // 滚动一个周期的时间长,单位ms
  147. duration: {
  148. type: [Number, String],
  149. default: 2000
  150. },
  151. // 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
  152. speed: {
  153. type: [Number, String],
  154. default: 160
  155. },
  156. // 水平滚动时,是否采用衔接形式滚动
  157. // 水平衔接模式,采用的是swiper组件,水平滚动
  158. isCircular: {
  159. type: Boolean,
  160. default: true
  161. },
  162. // 播放状态,play-播放,paused-暂停
  163. playState: {
  164. type: String,
  165. default: 'play'
  166. },
  167. // 是否禁止用手滑动切换
  168. // 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
  169. disableTouch: {
  170. type: Boolean,
  171. default: true
  172. },
  173. // 滚动通知设置圆角
  174. borderRadius: {
  175. type: [Number, String],
  176. default: 0
  177. },
  178. // 通知的边距
  179. padding: {
  180. type: [Number, String],
  181. default: '18rpx 24rpx'
  182. },
  183. // list列表为空时,是否显示组件
  184. noListHidden: {
  185. type: Boolean,
  186. default: true
  187. }
  188. },
  189. computed: {
  190. // 如果设置show为false,或者设置了noListHidden为true,且list长度又为零的话,隐藏组件
  191. isShow() {
  192. if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
  193. else return true;
  194. }
  195. },
  196. methods: {
  197. // 点击通告栏
  198. click(index) {
  199. this.$emit('click', index);
  200. },
  201. // 点击关闭按钮
  202. close() {
  203. this.$emit('close');
  204. },
  205. // 点击更多箭头按钮
  206. getMore() {
  207. this.$emit('getMore');
  208. },
  209. // 滚动一个周期结束,只对垂直,或者水平步进形式有效
  210. end() {
  211. this.$emit('end');
  212. }
  213. }
  214. };
  215. </script>
  216. <style lang="scss" scoped>
  217. @import "../../libs/css/style.components.scss";
  218. .u-notice-bar-wrap {
  219. overflow: hidden;
  220. }
  221. .u-notice-bar {
  222. padding: 18rpx 24rpx;
  223. overflow: hidden;
  224. }
  225. .u-direction-row {
  226. @include vue-flex;
  227. align-items: center;
  228. justify-content: space-between;
  229. }
  230. .u-left-icon {
  231. @include vue-flex;
  232. align-items: center;
  233. }
  234. .u-notice-box {
  235. flex: 1;
  236. @include vue-flex;
  237. overflow: hidden;
  238. margin-left: 12rpx;
  239. }
  240. .u-right-icon {
  241. margin-left: 12rpx;
  242. @include vue-flex;
  243. align-items: center;
  244. }
  245. .u-notice-content {
  246. line-height: 1;
  247. white-space: nowrap;
  248. font-size: 26rpx;
  249. animation: u-loop-animation 10s linear infinite both;
  250. text-align: right;
  251. // 这一句很重要,为了能让滚动左右连接起来
  252. padding-left: 100%;
  253. }
  254. @keyframes u-loop-animation {
  255. 0% {
  256. transform: translate3d(0, 0, 0);
  257. }
  258. 100% {
  259. transform: translate3d(-100%, 0, 0);
  260. }
  261. }
  262. </style>