12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <view class="page">
- <u-tabbar :value="tabbarValue" @change="name => tabbarValue = name" :fixed="true" :placeholder="true"
- :safeAreaInsetBottom="true" :border="false">
- <u-tabbar-item :text="item.text" v-for="(item,index) in list" :key="index" @click="changeTabbar">
- <image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeImg"></image>
- <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.inactiveImg"></image>
- </u-tabbar-item>
- </u-tabbar>
- </view>
- </template>
- <script>
- export default {
- props: {
- tabbarIndex: 0
- },
- data() {
- return {
- tabbarValue: 0,
- list: [{
- activeImg: 'https://i.ringzle.com/file/20240106/57895bbc5414416ea5de2a537ed23dc3.png',
- inactiveImg: 'https://i.ringzle.com/file/20240106/29bd09ef7eb748f1820c335f86f74c61.png',
- text: '首页',
- path: '/pages/home/index'
- },
- {
- activeImg: 'https://i.ringzle.com/file/20240106/584d0a4108c44fa5bc566d0d0082e07d.png',
- inactiveImg: 'https://i.ringzle.com/file/20240106/9561cd3843694891998a34ed41be0ec8.png',
- text: '房态',
- path: '/pages/house/index'
- },
- {
- activeImg: 'https://i.ringzle.com/file/20240106/41a218ecacd543b28faf20760712c372.png',
- inactiveImg: 'https://i.ringzle.com/file/20240106/9873e71314e44c22aa880bec2ecdac85.png',
- text: '统计',
- path: '/pages/statistics/index'
- },
- {
- activeImg: 'https://i.ringzle.com/file/20240106/daf6362d4d6745c29501cf30a4d99bc2.png',
- inactiveImg: 'https://i.ringzle.com/file/20240106/8c1f9fc0b5604ef7b966d98f2ffb1d2e.png',
- text: '我的',
- path: '/pages/my/index'
- }
- ]
- }
- },
- mounted() {
- this.tabbarValue = this.tabbarIndex;
- },
- methods: {
- changeTabbar(e) {
- this.tabbarValue = e;
- uni.reLaunch({
- url: this.list[e].path
- })
- }
- }
- }
- </script>
- <style lang="less">
- /deep/.u-page__item__slot-icon {
- width: 40rpx;
- height: 40rpx;
- margin: 8rpx 0 4rpx;
- }
- </style>
- <style lang="scss">
- </style>
|