Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

u-tabbar.vue 9.1 KiB

il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
il y a 2 ans
il y a 3 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <template>
  2. <view v-if="show" class="u-tabbar" @touchmove.stop.prevent="() => {}">
  3. <view class="u-tabbar__content safe-area-inset-bottom" :style="{
  4. height: $u.addUnit(height),
  5. backgroundColor: bgColor,
  6. }" :class="{
  7. 'u-border-top': borderTop
  8. }">
  9. <view class="u-tabbar__content__item" v-for="(item, index) in list" :key="index" :class="{
  10. 'u-tabbar__content__circle': midButton &&item.midButton
  11. }" @tap.stop="clickHandler(index)" :style="{
  12. backgroundColor: bgColor
  13. }">
  14. <view :class="[
  15. midButton && item.midButton ? 'u-tabbar__content__circle__button' : 'u-tabbar__content__item__button'
  16. ]">
  17. <u-icon
  18. :size="midButton && item.midButton ? midButtonSize : iconSize"
  19. :name="elIconPath(index)"
  20. img-mode="scaleToFill"
  21. :color="elColor(index)"
  22. :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
  23. ></u-icon>
  24. <u-badge :count="item.count" :is-dot="item.isDot"
  25. v-if="item.count || item.isDot"
  26. :offset="[-2, getOffsetRight(item.count, item.isDot)]"
  27. ></u-badge>
  28. </view>
  29. <view class="u-tabbar__content__item__text" :style="{
  30. color: elColor(index)
  31. }">
  32. <text class="u-line-1">{{item.text}}</text>
  33. </view>
  34. </view>
  35. <view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
  36. 'u-border': borderTop,
  37. }" :style="{
  38. backgroundColor: bgColor,
  39. left: midButtonLeft
  40. }">
  41. </view>
  42. </view>
  43. <!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
  44. <view class="u-fixed-placeholder safe-area-inset-bottom" :style="{
  45. height: `calc(${$u.addUnit(height)} + ${midButton && isBtnTop ? 48 : 0}rpx)`,
  46. }"></view>
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. props: {
  52. // 显示与否
  53. show: {
  54. type: Boolean,
  55. default: true
  56. },
  57. // 通过v-model绑定current值
  58. value: {
  59. type: [String, Number],
  60. default: 0
  61. },
  62. // 整个tabbar的背景颜色
  63. bgColor: {
  64. type: String,
  65. default: '#ffffff'
  66. },
  67. // tabbar的高度,默认50px,单位任意,如果为数值,则为rpx单位
  68. height: {
  69. type: [String, Number],
  70. default: '50px'
  71. },
  72. // 非凸起图标的大小,单位任意,数值默认rpx
  73. iconSize: {
  74. type: [String, Number],
  75. default: 40
  76. },
  77. // 凸起的图标的大小,单位任意,数值默认rpx
  78. midButtonSize: {
  79. type: [String, Number],
  80. default: 90
  81. },
  82. // 激活时的演示,包括字体图标,提示文字等的演示
  83. activeColor: {
  84. type: String,
  85. default: '#303133'
  86. },
  87. // 未激活时的颜色
  88. inactiveColor: {
  89. type: String,
  90. default: '#606266'
  91. },
  92. // 是否显示中部的凸起按钮
  93. midButton: {
  94. type: Boolean,
  95. default: false
  96. },
  97. // 配置参数
  98. list: {
  99. type: Array,
  100. default () {
  101. return []
  102. }
  103. },
  104. // 切换前的回调
  105. beforeSwitch: {
  106. type: Function,
  107. default: null
  108. },
  109. // 是否显示顶部的横线
  110. borderTop: {
  111. type: Boolean,
  112. default: true
  113. },
  114. // 是否隐藏原生tabbar
  115. hideTabBar: {
  116. type: Boolean,
  117. default: true
  118. },
  119. // 是否计算凸起位置的高度
  120. isBtnTop: {
  121. type: Boolean,
  122. default: true
  123. }
  124. },
  125. data() {
  126. return {
  127. // 由于安卓太菜了,通过css居中凸起按钮的外层元素有误差,故通过js计算将其居中
  128. midButtonLeft: '50%',
  129. pageUrl: '', // 当前页面URL
  130. }
  131. },
  132. created() {
  133. // 是否隐藏原生tabbar
  134. if(this.hideTabBar) uni.hideTabBar();
  135. // 获取引入了u-tabbar页面的路由地址,该地址没有路径前面的"/"
  136. let pages = getCurrentPages();
  137. // 页面栈中的最后一个即为项为当前页面,route属性为页面路径
  138. this.pageUrl = pages[pages.length - 1].route;
  139. },
  140. computed: {
  141. elIconPath() {
  142. return (index) => {
  143. // 历遍u-tabbar的每一项item时,判断是否传入了pagePath参数,如果传入了
  144. // 和data中的pageUrl参数对比,如果相等,即可判断当前的item对应当前的tabbar页面,设置高亮图标
  145. // 采用这个方法,可以无需使用v-model绑定的value值
  146. let pagePath = this.list[index].pagePath;
  147. // 如果定义了pagePath属性,意味着使用系统自带tabbar方案,否则使用一个页面用几个组件模拟tabbar页面的方案
  148. // 这两个方案对处理tabbar item的激活与否方式不一样
  149. if(pagePath) {
  150. if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) {
  151. return this.list[index].selectedIconPath;
  152. } else {
  153. return this.list[index].iconPath;
  154. }
  155. } else {
  156. // 普通方案中,索引等于v-model值时,即为激活项
  157. return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath
  158. }
  159. }
  160. },
  161. elColor() {
  162. return (index) => {
  163. // 判断方法同理于elIconPath
  164. let pagePath = this.list[index].pagePath;
  165. if(pagePath) {
  166. if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor;
  167. else return this.inactiveColor;
  168. } else {
  169. return index == this.value ? this.activeColor : this.inactiveColor;
  170. }
  171. }
  172. }
  173. },
  174. mounted() {
  175. this.midButton && this.getMidButtonLeft();
  176. },
  177. methods: {
  178. async clickHandler(index) {
  179. if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
  180. // 执行回调,同时传入索引当作参数
  181. // 在微信,支付宝等环境(H5正常),会导致父组件定义的customBack()函数体中的this变成子组件的this
  182. // 通过bind()方法,绑定父组件的this,让this.customBack()的this为父组件的上下文
  183. let beforeSwitch = this.beforeSwitch.bind(this.$u.$parent.call(this))(index);
  184. // 判断是否返回了promise
  185. if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
  186. await beforeSwitch.then(res => {
  187. // promise返回成功,
  188. this.switchTab(index);
  189. }).catch(err => {
  190. })
  191. } else if(beforeSwitch === true) {
  192. // 如果返回true
  193. this.switchTab(index);
  194. }
  195. } else {
  196. this.switchTab(index);
  197. }
  198. },
  199. // 切换tab
  200. switchTab(index) {
  201. // 发出事件和修改v-model绑定的值
  202. this.$emit('change', index);
  203. // 如果有配置pagePath属性,使用uni.switchTab进行跳转
  204. if(this.list[index].pagePath) {
  205. uni.switchTab({
  206. url: this.list[index].pagePath
  207. })
  208. } else {
  209. // 如果配置了papgePath属性,将不会双向绑定v-model传入的value值
  210. // 因为这个模式下,不再需要v-model绑定的value值了,而是通过getCurrentPages()适配
  211. this.$emit('input', index);
  212. }
  213. },
  214. // 计算角标的right值
  215. getOffsetRight(count, isDot) {
  216. // 点类型,count大于9(两位数),分别设置不同的right值,避免位置太挤
  217. if(isDot) {
  218. return -20;
  219. } else if(count > 9) {
  220. return -40;
  221. } else {
  222. return -30;
  223. }
  224. },
  225. // 获取凸起按钮外层元素的left值,让其水平居中
  226. getMidButtonLeft() {
  227. let windowWidth = this.$u.sys().windowWidth;
  228. // 由于安卓中css计算left: 50%的结果不准确,故用js计算
  229. this.midButtonLeft = (windowWidth / 2) + 'px';
  230. }
  231. }
  232. }
  233. </script>
  234. <style scoped lang="scss">
  235. @import "../../libs/css/style.components.scss";
  236. .u-fixed-placeholder {
  237. /* #ifndef APP-NVUE */
  238. box-sizing: content-box;
  239. /* #endif */
  240. }
  241. .u-tabbar {
  242. &__content {
  243. @include vue-flex;
  244. align-items: center;
  245. position: relative;
  246. position: fixed;
  247. bottom: 0;
  248. left: 0;
  249. width: 100%;
  250. z-index: 998;
  251. /* #ifndef APP-NVUE */
  252. box-sizing: content-box;
  253. /* #endif */
  254. &__circle__border {
  255. border-radius: 100%;
  256. width: 110rpx;
  257. height: 110rpx;
  258. top: -48rpx;
  259. position: absolute;
  260. z-index: 4;
  261. background-color: #ffffff;
  262. // 由于安卓的无能,导致只有3个tabbar item时,此css计算方式有误差
  263. // 故使用js计算的形式来定位,此处不注释,是因为js计算有延后,避免出现位置闪动
  264. left: 50%;
  265. transform: translateX(-50%);
  266. &:after {
  267. border-radius: 100px;
  268. }
  269. }
  270. &__item {
  271. flex: 1;
  272. justify-content: center;
  273. height: 100%;
  274. padding: 12rpx 0;
  275. @include vue-flex;
  276. flex-direction: column;
  277. align-items: center;
  278. position: relative;
  279. &__button {
  280. position: absolute;
  281. top: 14rpx;
  282. left: 50%;
  283. transform: translateX(-50%);
  284. }
  285. &__text {
  286. color: $u-content-color;
  287. font-size: 26rpx;
  288. line-height: 28rpx;
  289. position: absolute;
  290. bottom: 14rpx;
  291. left: 50%;
  292. transform: translateX(-50%);
  293. width: 100%;
  294. text-align: center;
  295. }
  296. }
  297. &__circle {
  298. position: relative;
  299. @include vue-flex;
  300. flex-direction: column;
  301. justify-content: space-between;
  302. z-index: 10;
  303. /* #ifndef APP-NVUE */
  304. height: calc(100% - 1px);
  305. /* #endif */
  306. &__button {
  307. width: 90rpx;
  308. height: 90rpx;
  309. border-radius: 100%;
  310. @include vue-flex;
  311. justify-content: center;
  312. align-items: center;
  313. position: absolute;
  314. background-color: #ffffff;
  315. top: -40rpx;
  316. left: 50%;
  317. z-index: 6;
  318. transform: translateX(-50%);
  319. }
  320. }
  321. }
  322. }
  323. </style>