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-column-notice.vue 4.8 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <view
  3. class="u-notice-bar"
  4. :style="{
  5. background: computeBgColor,
  6. padding: padding
  7. }"
  8. :class="[
  9. type ? `u-type-${type}-light-bg` : ''
  10. ]"
  11. >
  12. <view class="u-icon-wrap">
  13. <u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
  14. </view>
  15. <swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
  16. <swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
  17. <view
  18. class="u-news-item u-line-1"
  19. :style="[textStyle]"
  20. @tap="click(index)"
  21. :class="['u-type-' + type]"
  22. >
  23. {{ item }}
  24. </view>
  25. </swiper-item>
  26. </swiper>
  27. <view class="u-icon-wrap">
  28. <u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
  29. <u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. props: {
  36. // 显示的内容,数组
  37. list: {
  38. type: Array,
  39. default() {
  40. return [];
  41. }
  42. },
  43. // 显示的主题,success|error|primary|info|warning
  44. type: {
  45. type: String,
  46. default: 'warning'
  47. },
  48. // 是否显示左侧的音量图标
  49. volumeIcon: {
  50. type: Boolean,
  51. default: true
  52. },
  53. // 是否显示右侧的右箭头图标
  54. moreIcon: {
  55. type: Boolean,
  56. default: false
  57. },
  58. // 是否显示右侧的关闭图标
  59. closeIcon: {
  60. type: Boolean,
  61. default: false
  62. },
  63. // 是否自动播放
  64. autoplay: {
  65. type: Boolean,
  66. default: true
  67. },
  68. // 文字颜色,各图标也会使用文字颜色
  69. color: {
  70. type: String,
  71. default: ''
  72. },
  73. // 背景颜色
  74. bgColor: {
  75. type: String,
  76. default: ''
  77. },
  78. // 滚动方向,row-水平滚动,column-垂直滚动
  79. direction: {
  80. type: String,
  81. default: 'row'
  82. },
  83. // 是否显示
  84. show: {
  85. type: Boolean,
  86. default: true
  87. },
  88. // 字体大小,单位rpx
  89. fontSize: {
  90. type: [Number, String],
  91. default: 26
  92. },
  93. // 滚动一个周期的时间长,单位ms
  94. duration: {
  95. type: [Number, String],
  96. default: 2000
  97. },
  98. // 音量喇叭的大小
  99. volumeSize: {
  100. type: [Number, String],
  101. default: 34
  102. },
  103. // 水平滚动时的滚动速度,即每秒滚动多少rpx,这有利于控制文字无论多少时,都能有一个恒定的速度
  104. speed: {
  105. type: Number,
  106. default: 160
  107. },
  108. // 水平滚动时,是否采用衔接形式滚动
  109. isCircular: {
  110. type: Boolean,
  111. default: true
  112. },
  113. // 滚动方向,horizontal-水平滚动,vertical-垂直滚动
  114. mode: {
  115. type: String,
  116. default: 'horizontal'
  117. },
  118. // 播放状态,play-播放,paused-暂停
  119. playState: {
  120. type: String,
  121. default: 'play'
  122. },
  123. // 是否禁止用手滑动切换
  124. // 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
  125. disableTouch: {
  126. type: Boolean,
  127. default: true
  128. },
  129. // 通知的边距
  130. padding: {
  131. type: [Number, String],
  132. default: '18rpx 24rpx'
  133. }
  134. },
  135. computed: {
  136. // 计算字体颜色,如果没有自定义的,就用uview主题颜色
  137. computeColor() {
  138. if (this.color) return this.color;
  139. // 如果是无主题,就默认使用content-color
  140. else if(this.type == 'none') return '#606266';
  141. else return this.type;
  142. },
  143. // 文字内容的样式
  144. textStyle() {
  145. let style = {};
  146. if (this.color) style.color = this.color;
  147. else if(this.type == 'none') style.color = '#606266';
  148. style.fontSize = this.fontSize + 'rpx';
  149. return style;
  150. },
  151. // 垂直或者水平滚动
  152. vertical() {
  153. if(this.mode == 'horizontal') return false;
  154. else return true;
  155. },
  156. // 计算背景颜色
  157. computeBgColor() {
  158. if (this.bgColor) return this.bgColor;
  159. else if(this.type == 'none') return 'transparent';
  160. }
  161. },
  162. data() {
  163. return {
  164. // animation: false
  165. };
  166. },
  167. methods: {
  168. // 点击通告栏
  169. click(index) {
  170. this.$emit('click', index);
  171. },
  172. // 点击关闭按钮
  173. close() {
  174. this.$emit('close');
  175. },
  176. // 点击更多箭头按钮
  177. getMore() {
  178. this.$emit('getMore');
  179. },
  180. change(e) {
  181. let index = e.detail.current;
  182. if(index == this.list.length - 1) {
  183. this.$emit('end');
  184. }
  185. }
  186. }
  187. };
  188. </script>
  189. <style lang="scss" scoped>
  190. @import "../../libs/css/style.components.scss";
  191. .u-notice-bar {
  192. width: 100%;
  193. display: flex;
  194. align-items: center;
  195. justify-content: center;
  196. flex-wrap: nowrap;
  197. padding: 18rpx 24rpx;
  198. overflow: hidden;
  199. }
  200. .u-swiper {
  201. font-size: 26rpx;
  202. height: 32rpx;
  203. display: flex;
  204. align-items: center;
  205. flex: 1;
  206. margin-left: 12rpx;
  207. }
  208. .u-swiper-item {
  209. display: flex;
  210. align-items: center;
  211. overflow: hidden;
  212. }
  213. .u-news-item {
  214. overflow: hidden;
  215. }
  216. .u-right-icon {
  217. margin-left: 12rpx;
  218. display: inline-flex;
  219. align-items: center;
  220. }
  221. .u-left-icon {
  222. display: inline-flex;
  223. align-items: center;
  224. }
  225. </style>