u-tabs.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <view class="u-tabs">
  3. <view class="u-tabs__wrapper">
  4. <slot name="left"/>
  5. <view class="u-tabs__wrapper__scroll-view-wrapper">
  6. <scroll-view
  7. :scroll-x="scrollable"
  8. :scroll-left="scrollLeft"
  9. scroll-with-animation
  10. class="u-tabs__wrapper__scroll-view"
  11. :show-scrollbar="false"
  12. ref="u-tabs__wrapper__scroll-view"
  13. >
  14. <view
  15. class="u-tabs__wrapper__nav"
  16. ref="u-tabs__wrapper__nav"
  17. :style="[{
  18. flex: scrollable ? 0 : 1
  19. }]"
  20. >
  21. <view
  22. class="u-tabs__wrapper__nav__item"
  23. v-for="(item, index) in list"
  24. :key="index"
  25. @tap="clickHandler(item, index)"
  26. :ref="`u-tabs__wrapper__nav__item-${index}`"
  27. :style="[$u.addStyle(itemStyle)]"
  28. :class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
  29. >
  30. <text
  31. :class="['ellipsis' && 'u-line-1', item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
  32. class="u-tabs__wrapper__nav__item__text"
  33. :style="[textStyle(index)]"
  34. >{{ item[keyName] }}
  35. </text>
  36. <u-badge
  37. :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
  38. :isDot="item.badge && item.badge.isDot || propsBadge.isDot"
  39. :value="item.badge && item.badge.value || propsBadge.value"
  40. :max="item.badge && item.badge.max || propsBadge.max"
  41. :type="item.badge && item.badge.type || propsBadge.type"
  42. :showZero="item.badge && item.badge.showZero || propsBadge.showZero"
  43. :bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
  44. :color="item.badge && item.badge.color || propsBadge.color"
  45. :shape="item.badge && item.badge.shape || propsBadge.shape"
  46. :numberType="item.badge && item.badge.numberType || propsBadge.numberType"
  47. :inverted="item.badge && item.badge.inverted || propsBadge.inverted"
  48. customStyle="margin-left: 4px;"
  49. ></u-badge>
  50. </view>
  51. <!-- #ifdef APP-NVUE -->
  52. <view
  53. class="u-tabs__wrapper__nav__line"
  54. ref="u-tabs__wrapper__nav__line"
  55. :style="[{
  56. width: $u.addUnit(lineWidth),
  57. height: $u.addUnit(lineHeight),
  58. backgroundColor: lineColor
  59. }]"
  60. >
  61. <!-- #endif -->
  62. <!-- #ifndef APP-NVUE -->
  63. <view
  64. class="u-tabs__wrapper__nav__line"
  65. ref="u-tabs__wrapper__nav__line"
  66. :style="[{
  67. width: $u.addUnit(lineWidth),
  68. transform: `translate(${lineOffsetLeft}px)`,
  69. transitionDuration: `${firstTime ? 0 : duration}ms`,
  70. height: $u.addUnit(lineHeight),
  71. backgroundColor: lineColor
  72. }]"
  73. >
  74. <!-- #endif -->
  75. </view>
  76. </view>
  77. </scroll-view>
  78. </view>
  79. <slot name="right"/>
  80. </view>
  81. </view>
  82. </template>
  83. <script>
  84. // #ifdef APP-NVUE
  85. const animation = uni.requireNativePlugin('animation')
  86. const dom = uni.requireNativePlugin('dom')
  87. // #endif
  88. import props from './props.js';
  89. /**
  90. * Tabs 标签
  91. * @description tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。
  92. * @tutorial https://www.uviewui.com/components/tabs.html
  93. * @property {String | Number} duration 滑块移动一次所需的时间,单位秒(默认 200 )
  94. * @property {String | Number} swierWidth swiper的宽度(默认 '750rpx' )
  95. * @property {String} keyName 从`list`元素对象中读取的键名(默认 'name' )
  96. * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab,索引从0开始
  97. * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab,索引从0开始
  98. * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
  99. */
  100. export default {
  101. name: 'u-tabs',
  102. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  103. data() {
  104. return {
  105. firstTime: true,
  106. scrollLeft: 0,
  107. scrollViewWidth: 0,
  108. lineOffsetLeft: 0,
  109. tabsRect: {
  110. left: 0
  111. },
  112. innerCurrent: 0,
  113. moving: false,
  114. }
  115. },
  116. watch: {
  117. current: {
  118. immediate: true,
  119. handler(newValue, oldValue) {
  120. // 内外部值不相等时,才尝试移动滑块
  121. if (newValue !== this.innerCurrent) {
  122. this.innerCurrent = newValue
  123. this.$nextTick(() => {
  124. this.resize()
  125. })
  126. }
  127. }
  128. },
  129. // list变化时,重新渲染list各项信息
  130. list() {
  131. this.$nextTick(() => {
  132. this.resize()
  133. })
  134. }
  135. },
  136. computed: {
  137. textStyle() {
  138. return index => {
  139. const style = {}
  140. // 取当期是否激活的样式
  141. const customeStyle = index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u
  142. .addStyle(
  143. this.inactiveStyle)
  144. // 如果当前菜单被禁用,则加上对应颜色,需要在此做处理,是因为nvue下,无法在style样式中通过!import覆盖标签的内联样式
  145. if (this.list[index].disabled) {
  146. style.color = '#c8c9cc'
  147. }
  148. return uni.$u.deepMerge(customeStyle, style)
  149. }
  150. },
  151. propsBadge() {
  152. return uni.$u.props.badge
  153. }
  154. },
  155. async mounted() {
  156. this.init()
  157. },
  158. methods: {
  159. setLineLeft() {
  160. const tabItem = this.list[this.innerCurrent];
  161. if (!tabItem) {
  162. return;
  163. }
  164. // 获取滑块该移动的位置
  165. let lineOffsetLeft = this.list
  166. .slice(0, this.innerCurrent)
  167. .reduce((total, curr) => total + curr.rect.width, 0);
  168. let lineWidth = this.lineWidth; // 拷贝副本,防止间接修改props中的值
  169. // 如果lineWidth不是数字类型的话
  170. if (typeof lineWidth !== 'number') {
  171. // 判断后缀是否为rpx
  172. if (lineWidth.indexOf('rpx') > -1) {
  173. lineWidth = uni.upx2px(parseFloat(lineWidth)); // rpx -> px
  174. } else {
  175. lineWidth = parseFloat(lineWidth);
  176. }
  177. }
  178. this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
  179. // #ifdef APP-NVUE
  180. // 第一次移动滑块,无需过渡时间
  181. this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
  182. // #endif
  183. // 如果是第一次执行此方法,让滑块在初始化时,瞬间滑动到第一个tab item的中间
  184. // 这里需要一个定时器,因为在非nvue下,是直接通过style绑定过渡时间,需要等其过渡完成后,再设置为false(非第一次移动滑块)
  185. if (this.firstTime) {
  186. setTimeout(() => {
  187. this.firstTime = false
  188. }, 10);
  189. }
  190. },
  191. // nvue下设置滑块的位置
  192. animation(x, duration = 0) {
  193. // #ifdef APP-NVUE
  194. const ref = this.$refs['u-tabs__wrapper__nav__line']
  195. animation.transition(ref, {
  196. styles: {
  197. transform: `translateX(${x}px)`
  198. },
  199. duration
  200. })
  201. // #endif
  202. },
  203. // 点击某一个标签
  204. clickHandler(item, index) {
  205. // 因为标签可能为disabled状态,所以click是一定会发出的,但是change事件是需要可用的状态才发出
  206. this.$emit('click', {
  207. ...item,
  208. index
  209. })
  210. // 如果disabled状态,返回
  211. if (item.disabled) return
  212. this.innerCurrent = index
  213. this.resize()
  214. this.$emit('change', {
  215. ...item,
  216. index
  217. })
  218. },
  219. init() {
  220. uni.$u.sleep().then(() => {
  221. this.resize()
  222. })
  223. },
  224. setScrollLeft() {
  225. // 当前活动tab的布局信息,有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
  226. const tabRect = this.list[this.innerCurrent]
  227. // 累加得到当前item到左边的距离
  228. const offsetLeft = this.list
  229. .slice(0, this.innerCurrent)
  230. .reduce((total, curr) => {
  231. return total + curr.rect.width
  232. }, 0)
  233. // 此处为屏幕宽度
  234. const windowWidth = uni.$u.sys().windowWidth
  235. // 将活动的tabs-item移动到屏幕正中间,实际上是对scroll-view的移动
  236. let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
  237. .right) / 2 + this.tabsRect.left / 2
  238. // 这里做一个限制,限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
  239. scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
  240. this.scrollLeft = Math.max(0, scrollLeft)
  241. },
  242. // 获取所有标签的尺寸
  243. resize() {
  244. // 如果不存在list,则不处理
  245. if (this.list.length === 0) {
  246. return
  247. }
  248. Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
  249. this.tabsRect = tabsRect
  250. this.scrollViewWidth = 0
  251. itemRect.map((item, index) => {
  252. // 计算scroll-view的宽度,这里
  253. this.scrollViewWidth += item.width
  254. // 另外计算每一个item的中心点X轴坐标
  255. this.list[index].rect = item
  256. })
  257. // 获取了tabs的尺寸之后,设置滑块的位置
  258. this.setLineLeft()
  259. this.setScrollLeft()
  260. })
  261. },
  262. // 获取导航菜单的尺寸
  263. getTabsRect() {
  264. return new Promise(resolve => {
  265. this.queryRect('u-tabs__wrapper__scroll-view').then(size => resolve(size))
  266. })
  267. },
  268. // 获取所有标签的尺寸
  269. getAllItemRect() {
  270. return new Promise(resolve => {
  271. const promiseAllArr = this.list.map((item, index) => this.queryRect(
  272. `u-tabs__wrapper__nav__item-${index}`, true))
  273. Promise.all(promiseAllArr).then(sizes => resolve(sizes))
  274. })
  275. },
  276. // 获取各个标签的尺寸
  277. queryRect(el, item) {
  278. // #ifndef APP-NVUE
  279. // $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://www.uviewui.com/js/getRect.html
  280. // 组件内部一般用this.$uGetRect,对外的为uni.$u.getRect,二者功能一致,名称不同
  281. return new Promise(resolve => {
  282. this.$uGetRect(`.${el}`).then(size => {
  283. resolve(size)
  284. })
  285. })
  286. // #endif
  287. // #ifdef APP-NVUE
  288. // nvue下,使用dom模块查询元素高度
  289. // 返回一个promise,让调用此方法的主体能使用then回调
  290. return new Promise(resolve => {
  291. dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
  292. resolve(res.size)
  293. })
  294. })
  295. // #endif
  296. },
  297. },
  298. }
  299. </script>
  300. <style lang="scss" scoped>
  301. @import "../../libs/css/components.scss";
  302. .u-tabs {
  303. &__wrapper {
  304. @include flex;
  305. align-items: center;
  306. &__scroll-view-wrapper {
  307. flex: 1;
  308. /* #ifndef APP-NVUE */
  309. overflow: auto hidden;
  310. /* #endif */
  311. }
  312. &__scroll-view {
  313. @include flex;
  314. flex: 1;
  315. }
  316. &__nav {
  317. @include flex;
  318. position: relative;
  319. &__item {
  320. padding: 0 11px;
  321. @include flex;
  322. align-items: center;
  323. justify-content: center;
  324. flex: 1;
  325. &--disabled {
  326. /* #ifndef APP-NVUE */
  327. cursor: not-allowed;
  328. /* #endif */
  329. }
  330. &__text {
  331. font-size: 15px;
  332. color: $u-content-color;
  333. &--disabled {
  334. color: $u-disabled-color !important;
  335. }
  336. }
  337. }
  338. &__line {
  339. height: 3px;
  340. background-color: $u-primary;
  341. width: 30px;
  342. position: absolute;
  343. bottom: 2px;
  344. border-radius: 100px;
  345. transition-property: transform;
  346. transition-duration: 300ms;
  347. }
  348. }
  349. }
  350. }
  351. </style>