選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

u-tabs.vue 11 KiB

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