精华内容
下载资源
问答
  • uniapp自定义tabBar

    2021-03-25 11:18:57
    uniapp自定义tabBar方案 该方案解决的问题有: 1、不在同一个页面切换组件,可路由跳转,刷新页面显示该路由下的页面信息 2、首次

    uniapp自定义tabBar方案

     

    该方案,可以在切换tabBar的时候,路由也跟着变化,方便平时进行页面测试使用,不过有个缺点,第一次切换的时候会出现闪烁现象。

    解决闪烁的问题:

    1、可以把tabBar和页面组件都放在单页中用v-if判断,进行切换,单页切换的缺点是不能进行路由跳转(不能路由跳转)

    <template>
    	<view>
    		<index></index>
    		<my></my>
    		<team></team>
    		<promotion></promotion>
    	   <tab-bar></tab-bar>
    	</view>
    	</view>
    </template>

     2、把组件注入App.vue中,实现全局引用,但是uniapp不建议在App.vue中使用页面组件,也不要使用,不然出现各种问题,uniapp不能像vue那样在App.vue使用router-view实现选项卡功能(不推荐)

    3、 所以要同时实现首次不闪烁,而且可以进行路由切换的功能,目前不知道如何处理。(未知)

     

    (方案还有需要完善的地方,这里仅供大家参考)

    一、pages.json文件中添加tarBar

    因为需要用到tabBar跳转,因此可以往原来的tabBar.list中多添加几个,用于做判断是否tabBar切换(这里可以只添加路径,icon和text可以不需要)

    二、把原生的tabBar隐藏起来

    在App.vue中把原生的tabBar先隐藏起来

    onLaunch: function() {
    	console.log('App Launch')
    	uni.hideTabBar()
    },

    三、自定义一个tabBar组件

    在components中新建一个tabBar.vue的页面,用来封装组件

    HTML代码,这里循环遍历自己定义的tabBar.list(可根据需求来定义)

    <view v-if="showselected">
       <view class="tabbar">
    			<view class="navigator">
    				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
    					@click="switchTab(index,item)">
    						<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
    						<img :src="item.selectedIconPath" class="icon" v-else>
    						<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
    				</view>
    			</view>
    		</view>
      </view>

    data里面定义变量和循环列表,list即是自己定义的tabBar,和pages.json的tabBar写法一样

    data() {
    			return {
    				selectedIndex: 0, // 标记
    				showselected: false, // 是否在页面使用tarBar
    				tabBar: {
    					list: [{
    							"pagePath": "pages/index/index",
    							"iconPath": "/static/tabIcon/icon1.png",
    							"selectedIconPath": "/static/tabIcon/icon2.png",
    							"text": "首页"
    						}, {
    							"pagePath": "pages/team/team",
    							"iconPath": "/static/tabIcon/icon3.png",
    							"selectedIconPath": "/static/tabIcon/icon4.png",
    							"text": "团队"
    						}, {
    							"pagePath": "pages/promotion/promotion",
    							"iconPath": "/static/tabIcon/icon5.png",
    							"selectedIconPath": "/static/tabIcon/icon6.png",
    							"text": "推广圈"
    						},
    						{
    							"pagePath": "pages/my/my",
    							"iconPath": "/static/tabIcon/icon7.png",
    							"selectedIconPath": "/static/tabIcon/icon8.png",
    							"text": "我的"
    						}
    					]
    				},
    			}
    		},

    如果需要根据不同用户来渲染不同tabBar,可用vuex来保存tabBar的list列表

    const user_1 = [{
    		"pagePath": "../pages/test/me",
    		"iconPath": "../static/xxx.png",
    		"selectedIconPath": "../static/xxx.png",
    		"text": "me"
    	}, {
    		"pagePath": "../pages/test/you",
    		"iconPath": "../static/xxx.png",
    		"selectedIconPath": "../static/xxx.png",
    		"text": "you"
    	}, {
    		"pagePath": "../pages/test/other",
    		"iconPath": "../static/xxx.png",
    		"selectedIconPath": "../static/xxx.png",
    		"text": "other"
    	},
    	
    ]
    const user_2 = [{
    		"pagePath": "../pages/test/our",
    		"iconPath": "../static/xxx.png",
    		"selectedIconPath": "../static/xxx.png",
    		"text": "our"
    	}, {
    		"pagePath": "../pages/test/his",
    		"iconPath": "../static/xxx.png",
    		"selectedIconPath": "../static/xxx.png",
    		"text": "his"
    	}, 
    ]
    export default {
    	user_1,
    	user_1
    }
    

    四、全局引用组件

    往main.js注入组件

    // main.js
    import tabBar from 'components/tab-bar/tabBar.vue'
    Vue.component('tab-bar',tabBar) //挂载

    在每一个页面中引入

    <template>
    	<view>
    		<view class="">我是首页</view>
    		<tab-bar></tab-bar>
    	</view>
    </template>

     

    五、路由跳转

    tabBar定义成了组件,因此需要一个全局变量来判断它的切换和路由的跳转。

    首先,进入到uniapp的官方tabBar源码中,可以看到这样一段代码,下面的这段代码,就是路由跳转的依据,把他复制到自己的组件中,进行改造。

     watch: {
        $route: {
          immediate: true,
          handler (to) {
            if (to.meta.isTabBar) { // 判断是否属于tarBar
              // this.__path__ = to.path
              // 判断路由的路径和tarBar.list的pagePath是否相同,来确定一个全局的index
              const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
              if (index > -1) {
                this.selectedIndex = index // 标记是第几个tarBar
              }
            }
          }
        }
      },

     定义跳转的方法,这里用的是uni.switchTab进行跳转,不然url不会发生变化。注释掉的代码是官方的代码,这里是直接复制过来自己用。

    methods: {
    			switchTab(index, item) {
    				let url = '/' + item.pagePath
    				let pagePath = url
    				const detail = {
    				  index,
    				  pagePath
    				}
    				if (this.$route.path !== url) {
    				  // this.__path__ = this.$route.path
    				  uni.switchTab({
    				    from: 'tabBar',
    				    url,
    				    detail
    				  })
    				} else {
    				  // UniServiceJSBridge.emit('onTabItemTap', detail)
    				}
    				this.selectedIndex = index
    				// this.$emit('switchTab', detail)
    			}
    		},

    六、完整代码

    <template>
    		<view class="tabbar">
    			<view class="navigator">
    				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
    					@click="switchTab(index,item)">
    						<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
    						<img :src="item.selectedIconPath" class="icon" v-else>
    						<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
    				</view>
    			</view>
    		</view>
    	</view>
    
    </template>
    
    <script>
    	export default {
    		watch: {
    			$route: {
    				immediate: true,
    				handler(to) {
    					if (to.meta.isTabBar) {
    						// this.__path__ = this.$route.path
    						this.showselected = true
    						const index = this.tabBar.list.findIndex(item => to.meta.pagePath === item.pagePath)
    						if (index > -1) {
    							this.selectedIndex = index
    						}
    					}
    				}
    			}
    		},
    		data() {
    			return {
    				selectedIndex: 0,
    				showselected: false,
    				tabBar: {
    					list: [{
    							"pagePath": "pages/index/index",
    							"iconPath": "/static/tabIcon/icon1.png",
    							"selectedIconPath": "/static/tabIcon/icon2.png",
    							"text": "首页"
    						}, {
    							"pagePath": "pages/team/team",
    							"iconPath": "/static/tabIcon/icon3.png",
    							"selectedIconPath": "/static/tabIcon/icon4.png",
    							"text": "团队"
    						}, {
    							"pagePath": "pages/promotion/promotion",
    							"iconPath": "/static/tabIcon/icon5.png",
    							"selectedIconPath": "/static/tabIcon/icon6.png",
    							"text": "推广圈"
    						},
    						{
    							"pagePath": "pages/my/my",
    							"iconPath": "/static/tabIcon/icon7.png",
    							"selectedIconPath": "/static/tabIcon/icon8.png",
    							"text": "我的"
    						}
    					]
    				},
    			}
    		},
    		// beforeCreate() {
    		// 	this.__path__ = this.$route.path
    		// },
    		methods: {
    			switchTab(index, item) {
    				let url = '/' + item.pagePath
    				let pagePath = url
    				const detail = {
    				  index,
    				  pagePath
    				}
    				if (this.$route.path !== url) {
    				  // this.__path__ = this.$route.path
    				  uni.switchTab({
    				    from: 'tabBar',
    				    url,
    				    detail
    				  })
    				} else {
    				  // UniServiceJSBridge.emit('onTabItemTap', detail)
    				}
    				this.selectedIndex = index
    				// this.$emit('switchTab', detail)
    			}
    		},
    	}
    </script>
    
    <style>
    	.tabbar {
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		width: 100%;
    		height: 100rpx;
    		z-index: 999;
    		background: #F5F5F5;
    		border-top: 2rpx solid #eee;
    	}
    
    	.navigator {
    		display: flex;
    		justify-content: space-between;
    		width: 85%;
    		margin: 0 auto;
    		padding: 20rpx;
    	}
    
    	.navigator-item {
    		display: flex;
    		align-items: center;
    		flex-direction: column;
    		width: 50rpx;
    		height: 100%;
    	}
    
    	.item-text {
    		margin-top: 6rpx;
    		color: #777E86;
    		font-size: 24rpx;
    	}
    
    	.text-active {
    		color: #2E92FD !important;
    	}
    
    	.icon {
    		width: 20px;
    		height: 20px;
    	}
    </style>
    

     

     

    展开全文
  • uniapp自定义tabbar导航解析

    万次阅读 2019-09-23 18:51:53
    uniapp原生导航功能尽管不错,但有时并不能满足多样化的项目需求,如:自定义背景渐变、字体图标,一些特殊图标凸显效果,这时候就只能自定义tabbar来实现功能了。 如上图:H5、小程序、App端 下显示的自定义...

    uni-app自定义底部导航uni-tabbar|仿微信tabbar导航栏,支持当前第几个选中、自定义背景、字体颜色

    uniapp原生导航功能尽管不错,但有时并不能满足多样化的项目需求,如:自定义背景渐变、字体图标,一些特殊图标凸显效果,这时候就只能自定义tabbar来实现功能了。

    如上图:H5、小程序、App端 下显示的自定义tabbar效果

    图标可使用本地图片或阿里iconfont字体图标来,支持圆点提示,自定义背景、文字颜色

    • 新建tabbar.vue组件,并在main.js里面引入全局组件
    <block v-for="(item,index) in tabList" :key="index">
    	<view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
    		<view class="icon">
    			<text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>
    			<text v-if="item.badge" class="uni_badge">{{item.badge}}</text>
    			<text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>
    			</view>
    		<view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
    	</view>
    </block>
    <script>
    	export default {
    		data() {
    			return {
    				tabList: [
    					{
    						icon: 'icon-emotion',
    						text: 'tab01',
    						badge: 1
    					},
    					{
    						icon: 'icon-qianbao',
    						text: 'tab02',
    					},
    					{
    						icon: 'icon-choose01',
    						text: 'tab03',
    						badgeDot: true
    					}
    				],
    				currentTabIndex: this.current
    			}
    		},
    		props: {
    			current: { type: [Number, String], default: 0 },
    			backgroundColor: { type: String, default: '#fbfbfb' },
    			color: { type: String, default: '#999' },
    			tintColor: { type: String, default: '#42b983' }
    		},
    		methods: {
    			switchTab(index){
    				this.currentTabIndex = index
    				this.$emit('click', index)
    			}
    		},
    	}
    </script>
    import tabBar from './components/tabbar.vue'
    Vue.component('tab-bar', tabBar)
    • 在相应页面引入tabbar,并自定义tabbar属性参数

    <tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

    <tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>

    点击tabbar选项,返回该选项索引值,可根据索引值显示不同页面组件。

    data() {
    	return {
    		...
    		currentTabIndex: 1
    	}
    },
    methods: {
    	tabClick(index){
    		console.log('返回tabBar索引:' + index)
    		this.currentTabIndex = index
    	},
    	...
    },

    好了,以上就是uni-app自定义tabbar简单实现方法。对于uni-app如何实现自定义顶部导航栏,可以看看下面这篇文章~~

    https://blog.csdn.net/yanxinyun1990/article/details/100919657

     

    展开全文
  • uniapp 自定义tabBar导航闪烁问题

    千次阅读 2020-08-05 12:01:10
    对于uniapp项目自定义tabBar,我的使用是通过组件的方式引入页面,减少页面的闪烁,几乎看不出来

    对于uniapp项目自定义tabBar,我的使用是通过组件的方式引入页面,减少页面的闪烁,几乎看不出来

    展开全文
  • 注:"custom":true 使用自定义tabBar 的话 "custom" 值必须为true 先贴 wxml代码部分 ,在来讲讲为啥要使用cover-view来做tabBar而不是使用view ...

    cover-view
    覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image。
    注意:只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。

    1、支持background-color,不支持background-image,如果你发现你的素材在真机出不来,而且你又设置了背景图片的话,那你可以把这些元素全部替换成cover-image。

    2、不支持overflow: visible也是有点坑,这样的话,你想超出依然显示,就需要设置一个同级元素并提升层级才能达到效果了。

    3、如果里面有cover-image超出\溢出的话不显示会剪切掉,具体放大外部cover-view,里面做外边距(margin)调整

    cover-image
    覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
    cover-image发现了两个问题:
    1、虽说和image组件基本一样,但是设置mode属性也就是图片裁剪、缩放的模式无效
    2、宽度固定,高度auto,时,按照正常效果应该是图片按比例伸缩展示,但是发现该组件高度一直为0,只能根据应用场景寻找其他替代方案了。


    闲聊:一般自定义底部导航基本都是中间有个另类的需求,如:拍照,扫码,发布之类的直接入口

              这里解释下官方提供的自定义custom-tab-bar 只需要自定义重新写样式就可以了,本文提供的是非官方自己写的


    开发小程序中有时候会遇到比较“奇葩”的需求,tabBar突出(一般是拍照或者扫码类的)这时候原生的tabBar就无法使用了,需要自定义Component (tabBar)


    正文

    如果需要使用自定义tabbar的话,app.json需要设置tabBar值

    app.json 代码供参考

    "tabBar": {
            "custom":true,
            "color": "#999999",
            "selectedColor":"#333333",
            "borderStyle":"black",
            "backgroundColor":"",
            "list": [
                {
                    "pagePath": "pages/shopList/shopList",
                    "iconPath": "/img/img/na04.png",
                    "selectedIconPath": "/img/img/na04s.png",
                    "color": "#999999",
                    "selectColor": "#333333",
                    "text": ""
                },
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "/img/img/na02.png",
                    "selectedIconPath": "/img/img/na02s.png",
                    "color": "#999999",
                    "selectColor": "#333333",
                    "text": ""
                },
                {
                    "pagePath": "pages/helpCenter/helpCenter",
                    "iconPath": "/img/img/icon_saomia.png",
                    "selectedIconPath": "/img/img/icon_saomia.png",
                    "color": "#999999",
                    "selectColor": "#333333",
                    "text": ""
                },
                {
                    "pagePath": "pages/helpCenter/helpCenter",
                    "iconPath": "/img/img/na01.png",
                    "selectedIconPath": "/img/img/na01s.png",
                    "color": "#999999",
                    "selectColor": "#333333",
                    "text": ""
                },
                {
                    "pagePath": "pages/user/user",
                    "iconPath": "/img/img/na03.png",
                    "selectedIconPath": "/img/img/na03s.png",
                    "color": "#999999",
                    "selectColor": "#333333",
                    "text": ""
                }
            ]
        },

    注:"custom":true  使用自定义tabBar 的话 "custom" 值必须为true


    先贴wxml代码部分,在来讲讲为啥要使用cover-view来做tabBar而不是使用view

    <cover-view class="tab-bar" id='tabBars' ref='tabBars' style="height:{{isIphomex?'240rpx':'172rpx'}}">
        <cover-image src="/img/img/nav_bg.png" class="tab-bar-back"></cover-image>
        <cover-view class="fixeds" style="height:{{isIphomex?'240rpx':'172rpx'}}">
            <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{index==2?'tab-bar-yixing':'tab-bar-yixingNo'}}" data-paths="{{item.pagePath}}" data-indexsels="{{index}}" bindtap="switchTab" style="padding-bottom:{{isIphomex?'68rpx':'0'}}">
                <cover-view class="viewImg">
                    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
                </cover-view>
                <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
            </cover-view>
            <cover-view class="absout" wx:if='{{isIphomex}}'></cover-view>
        </cover-view>
    </cover-view>
    <!-- <view class="tab-bar" style="height:{{isIphomex?'240rpx':'172rpx'}}" wx:else>
        <image src="/img/img/nav_bg.png" class="tab-bar-back"></image>
        <view class="fixeds" style="height:{{isIphomex?'240rpx':'172rpx'}}">
            <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{index==2?'tab-bar-yixing':'tab-bar-yixingNo'}}" data-paths="{{item.pagePath}}" data-indexsels="{{index}}" bindtap="switchTab" style="padding-bottom:{{isIphomex?'68rpx':'0'}}">
                <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
                <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
                <view class="absout" wx:if='{{selected==1&&isIphomex}}'></view>
            </view>
        </view>
    </view> -->

    因为在底部的4个tab页面 有一个是地图MAP原生组件,而在微信版本7.0.5以下版本是无法使用view的,7.0.5以上包括7.0.5不受限制,亲测7.0.5版本以上包括7.0.5版本在map原生组件情况下是可以使用view的。具体详见小程序原生组件,在当前没有地图模块时建议使用view 去做,因为view去写界面的话会对iPhoneX及以上的非常规屏很好的兼容性,而cover-view由于不支持border单边、fixed的左右对齐之类的等等,详见 cover-view的 BUG&TIP第11条


    wxss部分

    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 172rpx;
        display: flex;
        /* padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom); */
        z-index: 0;
    }
    
    .tab-bar-back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 172rpx;
        z-index: 1;
    }
    
    .fixeds {
        display: flex;
        /* padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom); */
        width: 100vw;
        justify-content: space-between;
        align-items: flex-end;
        height: 172rpx;
        position: relative;
        z-index: 2;
    }
    
    .tab-bar-item {
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 98rpx;
        color: #999;
        background-color: #fff;
    }
    
    .tab-bar-item cover-image {
        width: 46rpx;
        height: 46rpx;
    }
    .tab-bar-item image {
        width: 46rpx;
        height: 46rpx;
    }
    
    .tab-bar-yixing {
        height: 172rpx;
        position: relative;
        z-index: 0;
        border-radius: 144rpx
    }
    .tab-bar-yixing cover-image {
        width: 144rpx;
        height: 144rpx;
        position: relative;
        z-index: 6;
        border-radius: 144rpx;
    }
    .viewImg{
        margin-bottom: 6rpx; 
    }
    .tab-bar-yixing .viewImg{
        width: 144rpx;
        height: 144rpx;
        margin-bottom:18rpx;
        position: relative;
        z-index: 6;
        border-radius: 144rpx;
        overflow: hidden;
    }
    .tab-bar-yixing image {
        width: 144rpx;
        height: 144rpx;
        margin-bottom:24rpx;
        position: relative;
        z-index: 6;
    }
    .absout{
        position: fixed;
        z-index: 3;
        width: 100%;
        height: 80rpx;
        bottom: 0;
        background-color: #ffffff;
    }
    .tab-bar-item cover-view {
        font-size: 10px;
    }
    .tab-bar-item view {
        font-size: 10px;
    }

    注:padding-bottom: constant(safe-area-inset-bottom);在使用cover-view模式下IphoneX及以上机型底部会留空白,所以我注释掉了,采用了一个底部80的高度白底的cover-view遮盖


    js的部分代码

    Component({
        data: {
            isIphomex: app.upVersions(),
            selected: 0,
            color: "#999999",
            selectedColor: "#333333",
            list:[],
        },
        attached() {
            this.setData({
                list: [{
                    pagePath: "/pages/shopList/shopList",
                    iconPath: "/img/img/na04.png",
                    selectedIconPath: "/img/img/na04s.png",
                    color: '#999999',
                    selectedColor: '#333333',
                    text: 首页
                }, {
                    pagePath: "/pages/index/index",
                    iconPath: "/img/img/na02.png",
                    selectedIconPath: "/img/img/na02s.png",
                    color: '#999999',
                    selectedColor: '#333333',
                        text: 地图
                }, {
                    pagePath: "/pages/helpCenter/helpCenter",
                    iconPath: "/img/img/icon_saomia.png",
                    selectedIconPath: "/img/img/icon_saomia.png",
                    color: '#999999',
                    selectedColor: '#333333',
                    text: "" // 扫码非人类设计突出的部分
                }, {
                    pagePath: "/pages/shopCat/index",
                    iconPath: "/img/img/na01.png",
                    selectedIconPath: "/img/img/na01s.png",
                    color: '#999999',
                    selectedColor: '#333333',
                        text: 购物车
                }, {
                    pagePath: "/pages/user/user",
                    iconPath: "/img/img/na03.png",
                    selectedIconPath: "/img/img/na03s.png",
                    color: '#999999',
                    selectedColor: '#333333',
                        text: 个人中心
                }]
            })
        },
        methods: {
            switchTab(e) {
                const data = e.currentTarget.dataset
                const url = data.paths
                if (data.indexsels != 2) {
                    wx.switchTab({ url });
                    this.setData({ selected: data.indexsels })
                } else {
                    wx.scanCode({
                        success: (res) => {
                            if (res.errMsg == "scanCode:ok") {
                                // 扫码成功
                            } else {}
                        },
                        fail: err => {
                            console.log("扫描err:" + JSON.stringify(err));
                        }
                    })
                }
    
            }
        }
    })

    JSON文件里面  设置

    {
    "component": true
    }

    app.upVersions() 为当前封装的公共部分的判断当前用户手持终端设备是否是iPhoneX及以上机型,具体详见下方upVersions函数

    注:官方提供的 只需要使用这圈住的if这段,放在四个页面的onShow 函数生命周期里,selected为当前选中的,底部的页面都需要写,哪个点击带入的就是哪个0-4,扫码或拍照的不设置


    判断机型upVersions函数

    /**
     * 判断获取当前机型是否是iPhoneX及以上机型
     */ 
    upVersions()=> { 
            let tmps = ['iPhone X', 'iPhone 11'], flag= false;
            for (let i in tmps) {
                // 微信版本
                if (wx.getSystemInfoSync().model.search(tmps[i]) > -1) {
                    flag = true
                    break;
                }
                // uniapp版本
                if (uni.getSystemInfoSync().model.search(tmps[i]) > -1) {
                    flag = true
                    break;
                }
            }
            return flag
        },

    参考官方 tabBar 自定义 

    展开全文
  • uniapp自定义tabbar必看

    千次阅读 2020-06-07 18:11:32
    将小程序四大法宝(wxss,json,wxml,js)直接搬过来,虽然tabbar有渲染在小程序上了,但是切换是没有效果的,所以还是行不通 方式三(行得通) 经过上面的两个尝试,还是乖乖的以vue的做法吧,用单页面的形式,通过v...
  • view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)"> <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-...
  • "tabBar": { "custom":true, "backgroundColor":"#FFFFFF", "borderStyle":"white", "list": [{ "pagePath": "pages/index/user" }{ "pagePath":"pages/index/service" }] } 2、跳转的时候使用switchTab...
  • 但当页面跳转后,自定义tabbar又变了,不是对应的图片改变 <tabbar name="hel" ref="tab"/> data(){ istabactive:false,//配合tabbar当前激活图片和文字用 } onShow(){ //由于是通过自带uniapp官方的tabbar实现...
  • tabbar', zdyTabbar) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() zdy-tabbar.vue文件编写: {{ item.text }} 所有的tabbar页面引入自定义tabbar:...
  • tabbar中图片命名不支持使用中文 在使用外部图片时,要注意是不是png或者jpg格式的图片。例如webp的图片是解析不出来的 在使用外部图片时,确定图片域名是否加入微信白名单 这个细节问题纠结了好久才找出来,关键...
  • uniapp 自定义原生tabbar样式

    千次阅读 2020-08-07 12:21:38
    确实自定义tabbar会出现这些问题。 缺点:1、需要在每一个需要tabbar页面引用这个组件,再设定好相应的激活值 2、跳转的时候屏幕上会出现短暂的空白,网络不好的时候还会很严重 3、如果...
  • uniapp自定义tabbar

    2020-11-13 16:07:56
    本次自动以tabbar在插件库sdk基础上完成,感谢巨人的肩膀。另外uniapp官方正在于此功能进行投票,后期可能官方就...3.在登录页面权限判断看是否展示自定义tabbar: uni.setStorageSync('isExternal', res.data.isExte
  • 自定义导航栏的时候会定义一个tabbar的页面,如下:(需求不一样代码不一样,大致效果是一样的) <view class="tabbar"> <view class="tabbar-item" @click="onChange(1)"> <image v-if="'...
  • 首先先在pages.josn中把需要tabBar设置好:只需要将页面路径放进去就可以 "tabBar": { "selectedColor":"#79D5AD", "color": "#999999", "backgroundColor":"#ffffff", "borderStyle": "white", "height":"0px...
  • 小程序自定义四件套(根目录下创建custom-tab-bar) index.js Component({ data: { selected: 0, color: "#909090", selectedColor: "#4B2B23", list: [ { pagePath: '/pages/home/index', text: '首页', ...
  • 最近遇到一个项目,UI给的设计图上tabbar是带有背景图片的,由于习惯使用uniapp自带的tabbar,首先查阅了pages.json中tabBar的配置,没有设置背景图片的参数。 第一个解决办法 首先想到的第一个办法是把tabbar背景设...
  • Uniapp-tabbar选择及适配

    千次阅读 2020-04-12 20:51:39
    起因: 最近在用uniapp开发的时候遇到了刘海屏手机tabbar适配问题,一开始用uni官方自带的tabbar,后来发现不能满足开发需求。于是在插件市场上找了一个自定义的footer自己重写了一下。拿出来记录一下。(我这里不是...
  • uniapptabBar/页面切换

    千次阅读 2020-03-04 18:27:25
    1.uniapp项目在微信小程序中打开 (1)运行—运行到小程序模拟器—运行设置 (2)复制微信发开发者路径 (3)运行—运行到小程序模拟器—微信开发者工具(W)-[hello](开启第一项) (4)进入微信开发者工具 (5)...
  • uniapptabBar页面之间跳转

    千次阅读 2021-02-02 17:16:53
    uni.switchTab //跳转实名认证按钮 gotoAuthentication() { uni.switchTab({ url:"../myown/myown", success() { console.log('跳转到‘我的’界面') } }) },
  • uniapp小程序自定义动态tabbar
  • manifest.json>app启动页配置>等待首页渲染完毕后再关闭Splash图,打勾解决。 应该是uniapp启动时候渲染页面的bug。
  • 我这里推荐的两种方式,第一种是查阅相关例子按需配置隐藏于显示实现的,第二种是自己按官方文档配置midButton 自定义实现的。 uni-app版本更新到2.3.5后App平台 重构 tabBar,原生支持 midButton(中间凸起),支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 699
精华内容 279
关键字:

uniapp自定义tabbar