You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-row-notice.vue 5.9 KiB

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