u-row-notice.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <view
  3. v-if="show"
  4. class="u-notice-bar"
  5. :style="{
  6. background: computeBgColor,
  7. padding: padding
  8. }"
  9. >
  10. <view class="u-direction-row">
  11. <view class="u-icon-wrap">
  12. <u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
  13. </view>
  14. <view class="u-notice-box" id="u-notice-box">
  15. <view
  16. class="u-notice-content"
  17. id="u-notice-content"
  18. :style="{
  19. animationDuration: animationDuration,
  20. color: computeColor,
  21. animationPlayState: animationPlayState,
  22. }"
  23. >
  24. <text class="u-notice-text" @tap="click" :style="{
  25. fontSize: fontSize + 'rpx',
  26. }">{{showText}}</text>
  27. </view>
  28. </view>
  29. <view class="u-icon-wrap">
  30. <u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
  31. <u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. props: {
  39. // 显示的内容,数组
  40. list: {
  41. type: Array,
  42. default() {
  43. return [];
  44. }
  45. },
  46. // 显示的主题,success|error|primary|info|warning|none
  47. // none主题默认为透明背景,黑色(contentColor)字体
  48. type: {
  49. type: String,
  50. default: 'warning'
  51. },
  52. // 是否显示左侧的音量图标
  53. volumeIcon: {
  54. type: Boolean,
  55. default: true
  56. },
  57. // 是否显示右侧的右箭头图标
  58. moreIcon: {
  59. type: Boolean,
  60. default: false
  61. },
  62. // 是否显示右侧的关闭图标
  63. closeIcon: {
  64. type: Boolean,
  65. default: false
  66. },
  67. // 是否自动播放
  68. autoplay: {
  69. type: Boolean,
  70. default: true
  71. },
  72. // 文字颜色,各图标也会使用文字颜色
  73. color: {
  74. type: String,
  75. default: ''
  76. },
  77. // 背景颜色
  78. bgColor: {
  79. type: String,
  80. default: ''
  81. },
  82. // 是否显示
  83. show: {
  84. type: Boolean,
  85. default: true
  86. },
  87. // 字体大小,单位rpx
  88. fontSize: {
  89. type: [Number, String],
  90. default: 26
  91. },
  92. // 音量喇叭的大小
  93. volumeSize: {
  94. type: [Number, String],
  95. default: 34
  96. },
  97. // 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
  98. speed: {
  99. type: [Number, String],
  100. default: 160
  101. },
  102. // 播放状态,play-播放,paused-暂停
  103. playState: {
  104. type: String,
  105. default: 'play'
  106. },
  107. // 通知的边距
  108. padding: {
  109. type: [Number, String],
  110. default: '18rpx 24rpx'
  111. }
  112. },
  113. data() {
  114. return {
  115. textWidth: 0, // 滚动的文字宽度
  116. boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度
  117. animationDuration: '10s', // 动画执行时间
  118. animationPlayState: 'paused', // 动画的开始和结束执行
  119. showText: '' // 显示的文本
  120. };
  121. },
  122. watch: {
  123. list: {
  124. immediate: true,
  125. handler(val) {
  126. this.showText = val.join(',');
  127. this.$nextTick(() => {
  128. this.initSize();
  129. });
  130. }
  131. },
  132. playState(val) {
  133. if(val == 'play') this.animationPlayState = 'running';
  134. else this.animationPlayState = 'paused';
  135. },
  136. speed(val) {
  137. this.initSize();
  138. }
  139. },
  140. computed: {
  141. // 计算字体颜色,如果没有自定义的,就用uview主题颜色
  142. computeColor() {
  143. if (this.color) return this.color;
  144. else if(this.type == 'none') return this.$u.color['contentColor'];
  145. else return this.$u.color[this.type];
  146. },
  147. // 计算背景颜色
  148. computeBgColor() {
  149. if (this.bgColor) return this.bgColor;
  150. else if(this.type == 'none') return 'transparent';
  151. else return this.$u.color[this.type + 'Light'];
  152. }
  153. },
  154. mounted() {
  155. this.$nextTick(() => {
  156. this.initSize();
  157. });
  158. },
  159. methods: {
  160. initSize() {
  161. let query = [],
  162. boxWidth = 0,
  163. textWidth = 0;
  164. let textQuery = new Promise((resolve, reject) => {
  165. uni.createSelectorQuery()
  166. .in(this)
  167. .select(`#u-notice-content`)
  168. .boundingClientRect()
  169. .exec(ret => {
  170. this.textWidth = ret[0].width;
  171. resolve();
  172. });
  173. });
  174. query.push(textQuery);
  175. Promise.all(query).then(() => {
  176. // 根据t=s/v(时间=路程/速度),这里为何不需要加上#u-notice-box的宽度,因为中设置了.u-notice-content样式中设置了padding-left: 100%
  177. // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
  178. this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
  179. // 这里必须这样开始动画,否则在APP上动画速度不会改变(HX版本2.4.6,IOS13)
  180. this.animationPlayState = 'paused';
  181. setTimeout(() => {
  182. if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running';
  183. }, 10);
  184. });
  185. },
  186. // 点击通告栏
  187. click(index) {
  188. this.$emit('click');
  189. },
  190. // 点击关闭按钮
  191. close() {
  192. this.$emit('close');
  193. },
  194. // 点击更多箭头按钮
  195. getMore() {
  196. this.$emit('getMore');
  197. }
  198. }
  199. };
  200. </script>
  201. <style lang="scss" scoped>
  202. .u-notice-bar {
  203. padding: 18rpx 24rpx;
  204. overflow: hidden;
  205. }
  206. .u-direction-row {
  207. display: flex;
  208. align-items: center;
  209. justify-content: space-between;
  210. }
  211. .u-left-icon {
  212. display: inline-flex;
  213. align-items: center;
  214. }
  215. .u-notice-box {
  216. flex: 1;
  217. display: flex;
  218. overflow: hidden;
  219. margin-left: 12rpx;
  220. }
  221. .u-right-icon {
  222. margin-left: 12rpx;
  223. display: inline-flex;
  224. align-items: center;
  225. }
  226. .u-notice-content {
  227. animation: u-loop-animation 10s linear infinite both;
  228. text-align: right;
  229. // 这一句很重要,为了能让滚动左右连接起来
  230. padding-left: 100%;
  231. display: flex;
  232. flex-wrap: nowrap;
  233. }
  234. .u-notice-text {
  235. font-size: 26rpx;
  236. word-break: keep-all;
  237. white-space: nowrap
  238. }
  239. @keyframes u-loop-animation {
  240. 0% {
  241. transform: translate3d(0, 0, 0);
  242. }
  243. 100% {
  244. transform: translate3d(-100%, 0, 0);
  245. }
  246. }
  247. </style>