做海报找图片的网站,马卡龙网站建设方案,免费推广seo,wordpress 图集动态设置某一项内容
使用场景#xff1a;不同角色显示不同导航栏或设置不同名称#xff0c;不同图标 API: uni.setTabBarItem(OBJECT)
属性类型默认值必填说明indexnumber无是tabBar的哪一项#xff0c;从左边算起#xff08;从0开始#xff09;textString无否tab上的按…动态设置某一项内容
使用场景不同角色显示不同导航栏或设置不同名称不同图标 API: uni.setTabBarItem(OBJECT)
属性类型默认值必填说明indexnumber无是tabBar的哪一项从左边算起从0开始textString无否tab上的按钮文字iconPathString无否图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px当 position 为 top 时此参数无效。微信小程序 2.7.0、支付宝小程序支持网络图片其他平台暂不支持网络图片selectedIconPathString无否选中时的图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px 当 position 为 top 时此参数无效pagePathString无否页面绝对路径必须在 pages 中先定义被替换掉的 pagePath 不会变成普通页面仍然需要使用 uni.switchTab 跳转visibleBooleantrue否该项是否显示iconfontObject无否字体图标优先级高于 iconPathsuccessFuntion无否接口调用成功的回调函数failFuntion无否接口调用失败的回调函数completeFuntion无否接口调用结束的回调函数调用成功、失败都会执行
iconfont参数说明
属性类型说明textString字库 Unicode 码selectedTextString选中后字库 Unicode 码fontSizeString字体图标字号pxcolorString字体图标颜色selectedColorString字体图标选中颜色
//首先在pages.json文件tabBar中设置
{pages: [{path : pages/index,style : {navigationBarTitleText : 首页,enablePullDownRefresh : false,navigationStyle: custom}}....],globalStyle: { ... },tabBar: {borderStyle: white,backgroundColor: #FFF,color: #999,selectedColor: #000,list: [{pagePath: pages/index,text: 首页},{pagePath: pages/statistics/index,text: 统计},{pagePath: pages/my/my,text: 我的}]}
}//index.vue首页
script
export default{data(){return{}},onShow(){/*获取用户角色根据用户角色设置导航*/let userType uni.getStorageSync(userInfo).userType;/*修改第二个导航名称*/if( userType 0 ){uni.setTabBarItem({index: 1,text: 圈子})}/*隐藏第二个导航*//*if( userType 0 ){uni.setTabBarItem({index: 1,visible:false})}*//*其他修改参照上面参数*/},methods:{}
}
/scriptuni.setTabBarItem官网参考
动态设置tabBar的整体样式
APIuni.setTabBarStyle(OBJECT) backgroundImage创建线性渐变说明 backgroundImage: linear-gradient(to top, #a80077, #66ff00); 目前暂不支持 radial-gradient径向渐变。 目前只支持两种颜色的渐变渐变方向如下 to right从左向右渐变 to left从右向左渐变 to bottom从上到下渐变 to top从下到上渐变 to bottom right从左上角到右下角 to top left从右下角到左上角 隐藏导航栏
API : uni.hideTabBar(OBJECT)所有平台均支持
OBJECT参数说明
参数类型默认值必填说明animationbooleanfalse否是否需要动画效果仅微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持successFuntion无否接口调用成功的回调函数failFuntion无否接口调用失败的回调函数completeFuntion无否接口调用结束的回调函数调用成功、失败都会执行
显示导航栏
API : uni.showTabBar(OBJECT)
OBJECT参数说明
参数类型默认值必填说明animationbooleanfalse否是否需要动画效果仅微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持successFuntion无否接口调用成功的回调函数failFuntion无否接口调用失败的回调函数completeFuntion无否接口调用结束的回调函数调用成功、失败都会执行
为某一项右上角添加文本
API : uni.setTabBarBadge(OBJECT)
参数类型必填说明indexNumber是tabBar的哪一项从左边算起textString是显示的文本不超过 3 个半角字符successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
//示例
uni.setTabBarBadge({index: 0,text: 1
})移除 tabBar 某一项右上角的文本
API : uni.removeTabBarBadge(OBJECT)
参数类型必填说明indexNumber是tabBar的哪一项从左边算起textString是显示的文本不超过 3 个半角字符successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
显示 tabBar 某一项右上角的文本
API : uni.showTabBarRedDot(OBJECT) 参数同上
隐藏 tabBar 某一项右上角的文本
API : uni.hideTabBarRedDot(OBJECT) 参数同上
监听中间按钮点击事件
API : uni.onTabBarMidButtonTap(CALLBACK)
