tabbar.nvue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <view class="u-page">
  3. <view class="u-page__item">
  4. <text class="u-page__item__title">基础功能</text>
  5. <u-tabbar
  6. :value="value1"
  7. @change="change1"
  8. :fixed="false"
  9. :placeholder="false"
  10. :safeAreaInsetBottom="false"
  11. >
  12. <u-tabbar-item
  13. text="首页"
  14. icon="home"
  15. @click="click1"
  16. ></u-tabbar-item>
  17. <u-tabbar-item
  18. text="放映厅"
  19. icon="photo"
  20. @click="click1"
  21. ></u-tabbar-item>
  22. <u-tabbar-item
  23. text="直播"
  24. icon="play-right"
  25. @click="click1"
  26. ></u-tabbar-item>
  27. <u-tabbar-item
  28. text="我的"
  29. icon="account"
  30. @click="click1"
  31. ></u-tabbar-item>
  32. </u-tabbar>
  33. </view>
  34. <view class="u-page__item">
  35. <text class="u-page__item__title">显示徽标</text>
  36. <u-tabbar
  37. :value="value2"
  38. :placeholder="false"
  39. @change="name => value2 = name"
  40. :fixed="false"
  41. :safeAreaInsetBottom="false"
  42. >
  43. <u-tabbar-item
  44. text="首页"
  45. icon="home"
  46. dot
  47. ></u-tabbar-item>
  48. <u-tabbar-item
  49. text="放映厅"
  50. icon="photo"
  51. badge="3"
  52. ></u-tabbar-item>
  53. <u-tabbar-item
  54. text="直播"
  55. icon="play-right"
  56. ></u-tabbar-item>
  57. <u-tabbar-item
  58. text="我的"
  59. icon="account"
  60. ></u-tabbar-item>
  61. </u-tabbar>
  62. </view>
  63. <view class="u-page__item">
  64. <text class="u-page__item__title">匹配标签的名称</text>
  65. <u-tabbar
  66. :placeholder="false"
  67. :value="value3"
  68. @change="name => value3 = name"
  69. :fixed="false"
  70. :safeAreaInsetBottom="false"
  71. >
  72. <u-tabbar-item
  73. text="首页"
  74. icon="home"
  75. name="home"
  76. ></u-tabbar-item>
  77. <u-tabbar-item
  78. text="放映厅"
  79. icon="photo"
  80. name="photo"
  81. ></u-tabbar-item>
  82. <u-tabbar-item
  83. text="直播"
  84. icon="play-right"
  85. name="play-right"
  86. ></u-tabbar-item>
  87. <u-tabbar-item
  88. text="我的"
  89. name="account"
  90. icon="account"
  91. ></u-tabbar-item>
  92. </u-tabbar>
  93. </view>
  94. <view class="u-page__item">
  95. <text class="u-page__item__title">自定义图标/颜色</text>
  96. <u-tabbar
  97. :value="value4"
  98. @change="name => value4 = name"
  99. :fixed="false"
  100. :placeholder="false"
  101. activeColor="#d81e06"
  102. :safeAreaInsetBottom="false"
  103. >
  104. <u-tabbar-item text="首页">
  105. <image
  106. class="u-page__item__slot-icon"
  107. slot="active-icon"
  108. src="https://cdn.uviewui.com/uview/common/bell-selected.png"
  109. ></image>
  110. <image
  111. class="u-page__item__slot-icon"
  112. slot="inactive-icon"
  113. src="https://cdn.uviewui.com/uview/common/bell.png"
  114. ></image>
  115. </u-tabbar-item>
  116. <u-tabbar-item
  117. text="放映厅"
  118. icon="photo"
  119. ></u-tabbar-item>
  120. <u-tabbar-item
  121. text="直播"
  122. icon="play-right"
  123. ></u-tabbar-item>
  124. <u-tabbar-item
  125. text="我的"
  126. icon="account"
  127. ></u-tabbar-item>
  128. </u-tabbar>
  129. </view>
  130. <view class="u-page__item">
  131. <text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
  132. <u-tabbar
  133. :value="value5"
  134. :fixed="false"
  135. @change="change5"
  136. :safeAreaInsetBottom="false"
  137. :placeholder="false"
  138. >
  139. <u-tabbar-item
  140. text="首页"
  141. icon="home"
  142. >
  143. </u-tabbar-item>
  144. <u-tabbar-item
  145. text="放映厅"
  146. icon="photo"
  147. ></u-tabbar-item>
  148. <u-tabbar-item
  149. text="直播"
  150. icon="play-right"
  151. ></u-tabbar-item>
  152. <u-tabbar-item
  153. text="我的"
  154. icon="account"
  155. ></u-tabbar-item>
  156. </u-tabbar>
  157. </view>
  158. <view class="u-page__item">
  159. <text class="u-page__item__title">去除上边框</text>
  160. <u-tabbar
  161. :value="value7"
  162. :placeholder="false"
  163. :border="false"
  164. @change="name => value7 = name"
  165. :fixed="false"
  166. :safeAreaInsetBottom="false"
  167. >
  168. <u-tabbar-item
  169. text="首页"
  170. icon="home"
  171. ></u-tabbar-item>
  172. <u-tabbar-item
  173. text="放映厅"
  174. icon="photo"
  175. ></u-tabbar-item>
  176. <u-tabbar-item
  177. text="直播"
  178. icon="play-right"
  179. ></u-tabbar-item>
  180. <u-tabbar-item
  181. text="我的"
  182. icon="account"
  183. ></u-tabbar-item>
  184. </u-tabbar>
  185. </view>
  186. <view class="u-page__item">
  187. <text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
  188. <u-gap height="150"></u-gap>
  189. <u-tabbar
  190. :value="value6"
  191. @change="name => value6 = name"
  192. :fixed="true"
  193. :placeholder="true"
  194. :safeAreaInsetBottom="true"
  195. >
  196. <u-tabbar-item
  197. text="首页"
  198. icon="home"
  199. >
  200. </u-tabbar-item>
  201. <u-tabbar-item
  202. text="放映厅"
  203. icon="photo"
  204. ></u-tabbar-item>
  205. <u-tabbar-item
  206. text="直播"
  207. icon="play-right"
  208. ></u-tabbar-item>
  209. <u-tabbar-item
  210. text="我的"
  211. icon="account"
  212. ></u-tabbar-item>
  213. </u-tabbar>
  214. </view>
  215. </view>
  216. </template>
  217. <script>
  218. export default {
  219. data() {
  220. return {
  221. value1: 0,
  222. value2: 1,
  223. value3: 'play-right',
  224. value4: 0,
  225. value5: 0,
  226. value6: 0,
  227. value7: 3
  228. }
  229. },
  230. onLoad() {
  231. },
  232. methods: {
  233. change5(name) {
  234. if (name === 1) return uni.$u.toast('请您先登录')
  235. else this.value5 = name
  236. },
  237. change1(e) {
  238. this.value1 = e
  239. console.log('change1', e);
  240. },
  241. click1(e) {
  242. console.log('click1', e);
  243. }
  244. },
  245. }
  246. </script>
  247. <style lang="scss">
  248. .u-page {
  249. padding: 0;
  250. &__item {
  251. &__title {
  252. color: $u-tips-color;
  253. background-color: $u-bg-color;
  254. padding: 15px;
  255. font-size: 15px;
  256. &__slot-title {
  257. color: $u-primary;
  258. font-size: 14px;
  259. }
  260. }
  261. &__slot-icon {
  262. width: 17px;
  263. height: 17px;
  264. }
  265. }
  266. }
  267. </style>