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-tabs.vue 11 KiB

2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <template>
  2. <view class="u-tabs" :style="{
  3. background: bgColor
  4. }">
  5. <!-- $u.getRect()对组件根节点无效,因为写了.in(this),故这里获取内层接点尺寸 -->
  6. <view :id="id">
  7. <scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
  8. <view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
  9. <view class="u-tab-item" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
  10. :style="[tabItemStyle(index)]">
  11. {{ item[name] || item['name']}}
  12. <block v-if="item.count!=undefined">
  13. <text class="count">{{item.count}}</text>
  14. </block>
  15. </view>
  16. <view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
  17. </view>
  18. </scroll-view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. /**
  24. * tabs 标签
  25. * @description 该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。
  26. * @tutorial https://www.uviewui.com/components/tabs.html
  27. * @property {Boolean} is-scroll tabs是否可以左右拖动(默认true)
  28. * @property {Array} list 标签数组,元素为对象,如[{name: '推荐'}]
  29. * @property {String Number} current 指定哪个tab为激活状态(默认0)
  30. * @property {String Number} height 导航栏的高度,单位rpx(默认80)
  31. * @property {String Number} font-size tab文字大小,单位rpx(默认30)
  32. * @property {String Number} duration 滑块移动一次所需的时间,单位秒(默认0.5)
  33. * @property {String} active-color 滑块和激活tab文字的颜色(默认#2979ff)
  34. * @property {String} inactive-color tabs文字颜色(默认#303133)
  35. * @property {String Number} bar-width 滑块宽度,单位rpx(默认40)
  36. * @property {Object} active-item-style 活动tabs item的样式,对象形式
  37. * @property {Object} bar-style 底部滑块的样式,对象形式
  38. * @property {Boolean} show-bar 是否显示底部的滑块(默认true)
  39. * @property {String Number} bar-height 滑块高度,单位rpx(默认6)
  40. * @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
  41. * @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
  42. * @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
  43. * @property {Boolean} bold 激活选项的字体是否加粗(默认true)
  44. * @event {Function} change 点击标签时触发
  45. * @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
  46. */
  47. export default {
  48. name: "u-tabs",
  49. props: {
  50. // 导航菜单是否需要滚动,如只有2或者3个的时候,就不需要滚动了,此时使用flex平分tab的宽度
  51. isScroll: {
  52. type: Boolean,
  53. default: true
  54. },
  55. //需循环的标签列表
  56. list: {
  57. type: Array,
  58. default () {
  59. return [];
  60. }
  61. },
  62. // 当前活动tab的索引
  63. current: {
  64. type: [Number, String],
  65. default: 0
  66. },
  67. // 导航栏的高度和行高
  68. height: {
  69. type: [String, Number],
  70. default: 80
  71. },
  72. // 字体大小
  73. fontSize: {
  74. type: [String, Number],
  75. default: 30
  76. },
  77. // 过渡动画时长, 单位ms
  78. duration: {
  79. type: [String, Number],
  80. default: 0.5
  81. },
  82. // 选中项的主题颜色
  83. activeColor: {
  84. type: String,
  85. default: '#2979ff'
  86. },
  87. // 未选中项的颜色
  88. inactiveColor: {
  89. type: String,
  90. default: '#303133'
  91. },
  92. // 菜单底部移动的bar的宽度,单位rpx
  93. barWidth: {
  94. type: [String, Number],
  95. default: 40
  96. },
  97. // 移动bar的高度
  98. barHeight: {
  99. type: [String, Number],
  100. default: 6
  101. },
  102. // 单个tab的左或有内边距(左右相同)
  103. gutter: {
  104. type: [String, Number],
  105. default: 30
  106. },
  107. // 导航栏的背景颜色
  108. bgColor: {
  109. type: String,
  110. default: '#ffffff'
  111. },
  112. // 读取传入的数组对象的属性
  113. name: {
  114. type: String,
  115. default: 'name'
  116. },
  117. // 活动tab字体是否加粗
  118. bold: {
  119. type: Boolean,
  120. default: true
  121. },
  122. // 当前活动tab item的样式
  123. activeItemStyle: {
  124. type: Object,
  125. default() {
  126. return {}
  127. }
  128. },
  129. // 是否显示底部的滑块
  130. showBar: {
  131. type: Boolean,
  132. default: true
  133. },
  134. // 底部滑块的自定义样式
  135. barStyle: {
  136. type: Object,
  137. default() {
  138. return {}
  139. }
  140. }
  141. },
  142. data() {
  143. return {
  144. scrollLeft: 0, // 滚动scroll-view的左边滚动距离
  145. tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
  146. componentWidth: 0, // 屏幕宽度,单位为px
  147. scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
  148. parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
  149. id: this.$u.guid(), // id值
  150. currentIndex: this.current,
  151. barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时),无需动画,否则给人怪异的感觉
  152. };
  153. },
  154. watch: {
  155. // 监听tab的变化,重新计算tab菜单的布局信息,因为实际使用中菜单可能是通过
  156. // 后台获取的(如新闻app顶部的菜单),获取返回需要一定时间,所以list变化时,重新获取布局信息
  157. list(n, o) {
  158. // list变动时,重制内部索引,否则可能导致超出数组边界的情况
  159. if(n.length !== o.length) this.currentIndex = 0;
  160. // 用$nextTick等待视图更新完毕后再计算tab的局部信息,否则可能因为tab还没生成就获取,就会有问题
  161. this.$nextTick(() => {
  162. this.init();
  163. });
  164. },
  165. current: {
  166. immediate: true,
  167. handler(nVal, oVal) {
  168. // 视图更新后再执行移动操作
  169. this.$nextTick(() => {
  170. this.currentIndex = nVal;
  171. this.scrollByIndex();
  172. });
  173. }
  174. },
  175. },
  176. computed: {
  177. // 移动bar的样式
  178. tabBarStyle() {
  179. let style = {
  180. width: this.barWidth + 'rpx',
  181. transform: `translate(${this.scrollBarLeft}px, -100%)`,
  182. // 滑块在页面渲染后第一次滑动时,无需动画效果
  183. 'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
  184. 'background-color': this.activeColor,
  185. height: this.barHeight + 'rpx',
  186. // 设置一个很大的值,它会自动取能用的最大值,不用高度的一半,是因为高度可能是单数,会有小数出现
  187. 'border-radius': `${this.barHeight / 2}px`
  188. };
  189. Object.assign(style, this.barStyle);
  190. return style;
  191. },
  192. // tab的样式
  193. tabItemStyle() {
  194. return (index) => {
  195. let style = {
  196. height: this.height + 'rpx',
  197. 'line-height': this.height + 'rpx',
  198. 'font-size': this.fontSize + 'rpx',
  199. 'transition-duration': `${this.duration}s`,
  200. padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
  201. flex: this.isScroll ? 'auto' : '1'
  202. };
  203. // 字体加粗
  204. if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
  205. if (index == this.currentIndex) {
  206. style.color = this.activeColor;
  207. // 给选中的tab item添加外部自定义的样式
  208. style = Object.assign(style, this.activeItemStyle);
  209. } else {
  210. style.color = this.inactiveColor;
  211. }
  212. return style;
  213. }
  214. }
  215. },
  216. methods: {
  217. // 设置一个init方法,方便多处调用
  218. async init() {
  219. // 获取tabs组件的尺寸信息
  220. let tabRect = await this.$uGetRect('#' + this.id);
  221. // tabs组件距离屏幕左边的宽度
  222. this.parentLeft = tabRect.left;
  223. // tabs组件的宽度
  224. this.componentWidth = tabRect.width;
  225. this.getTabRect();
  226. },
  227. // 点击某一个tab菜单
  228. clickTab(index) {
  229. // 点击当前活动tab,不触发事件
  230. if(index == this.currentIndex) return ;
  231. // 发送事件给父组件
  232. this.$emit('change', index);
  233. },
  234. // 查询tab的布局信息
  235. getTabRect() {
  236. // 创建节点查询
  237. let query = uni.createSelectorQuery().in(this);
  238. // 历遍所有tab,这里是执行了查询,最终使用exec()会一次性返回查询的数组结果
  239. for (let i = 0; i < this.list.length; i++) {
  240. // 只要size和rect两个参数
  241. query.select(`#u-tab-item-${i}`).fields({
  242. size: true,
  243. rect: true
  244. });
  245. }
  246. // 执行查询,一次性获取多个结果
  247. query.exec(
  248. function(res) {
  249. this.tabQueryInfo = res;
  250. // 初始化滚动条和移动bar的位置
  251. this.scrollByIndex();
  252. }.bind(this)
  253. );
  254. },
  255. // 滚动scroll-view,让活动的tab处于屏幕的中间位置
  256. scrollByIndex() {
  257. // 当前活动tab的布局信息,有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
  258. let tabInfo = this.tabQueryInfo[this.currentIndex];
  259. if (!tabInfo) return;
  260. // 活动tab的宽度
  261. let tabWidth = tabInfo.width;
  262. // 活动item的左边到tabs组件左边的距离,用item的left减去tabs的left
  263. let offsetLeft = tabInfo.left - this.parentLeft;
  264. // 将活动的tabs-item移动到屏幕正中间,实际上是对scroll-view的移动
  265. let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
  266. this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
  267. // 当前活动item的中点点到左边的距离减去滑块宽度的一半,即可得到滑块所需的移动距离
  268. let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
  269. // 计算当前活跃item到组件左边的距离
  270. this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
  271. // 第一次移动滑块的时候,barFirstTimeMove为true,放到延时中将其设置false
  272. // 延时是因为scrollBarLeft作用于computed计算时,需要一个过程需,否则导致出错
  273. if(this.barFirstTimeMove == true) {
  274. setTimeout(() => {
  275. this.barFirstTimeMove = false;
  276. }, 100)
  277. }
  278. }
  279. },
  280. mounted() {
  281. this.init();
  282. }
  283. };
  284. </script>
  285. <style lang="scss" scoped>
  286. @import "../../libs/css/style.components.scss";
  287. view,
  288. scroll-view {
  289. box-sizing: border-box;
  290. }
  291. .count{
  292. color: red;
  293. margin-left: 12rpx;
  294. }
  295. ::-webkit-scrollbar,
  296. ::-webkit-scrollbar,
  297. ::-webkit-scrollbar {
  298. display: none;
  299. width: 0 !important;
  300. height: 0 !important;
  301. -webkit-appearance: none;
  302. background: transparent;
  303. }
  304. .u-scroll-box {
  305. position: relative;
  306. }
  307. /* #ifdef H5 */
  308. // 通过样式穿透,隐藏H5下,scroll-view下的滚动条
  309. scroll-view /deep/ ::-webkit-scrollbar {
  310. display: none;
  311. width: 0 !important;
  312. height: 0 !important;
  313. -webkit-appearance: none;
  314. background: transparent;
  315. }
  316. /* #endif */
  317. .u-scroll-view {
  318. width: 100%;
  319. white-space: nowrap;
  320. position: relative;
  321. }
  322. .u-tab-item {
  323. position: relative;
  324. display: inline-block;
  325. text-align: center;
  326. transition-property: background-color, color;
  327. }
  328. .u-tab-bar {
  329. position: absolute;
  330. bottom: 0;
  331. }
  332. .u-tabs-scorll-flex {
  333. display: flex;
  334. justify-content: space-between;
  335. }
  336. </style>