学员端小程序
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.

354 lines
11 KiB

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