Skip to content

U
uni-app-ddh-shop
Commit 5ed32c4b authored by ly's avatar ly
Browse files
Options

动态底部tab

parent d26bb712
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1193 additions and 72 deletions
.DS_Store
View file @ 5ed32c4b
No preview for this file type
.history/README_20240726141641.md deleted 100644 → 0
View file @ d26bb712
### 项目名称
多典花典当相关
### profile文件
ios和android的证书文件
ios:
私钥：123456
android:
证书别名：
测试：ddhtest.keystore
线上：ddhprod.keystore
私钥：123456
\ No newline at end of file
.history/README_20240803114955.md deleted 100644 → 0
View file @ d26bb712
### 项目名称
多典花典当商城
### profile文件
ios和android的证书文件
ios:
私钥：123456
android:
证书别名：
测试：ddhtest.keystore
线上：ddhprod.keystore
私钥：123456
\ No newline at end of file
App.vue
View file @ 5ed32c4b
......@@ -4,6 +4,7 @@
import { SelectLocation } from "./utils/authPerission";
export default {
onLaunch: function() {
//禁止横屏
plus.screen.lockOrientation("portrait-primary")
const common = uni.getStorageSync("m-header-device")
......
README.md
View file @ 5ed32c4b
### 项目名称 2024.08.21
new-finance此分支是合并典当商城和贷超的
new-dev此分支是多典花贷超更新和动态tab
### profile文件
ios和android的证书文件
ios:
......
components/.DS_Store
View file @ 5ed32c4b
No preview for this file type
components/tabber/index.less 0 → 100644
View file @ 5ed32c4b
.p-tabber{
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding-top: 10rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
.tab-content{
display: flex;
.one-tab{
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
.tab-img{
width: 52rpx;
height: 53rpx;
.img{
width: 100%;
height: 100%;
}
}
.tit{
font-size: 30rpx;
transform: scale(0.7);
}
.selectTexts{
color:#1890e1;
}
.texts{
color: block;
}
}
}
}
\ No newline at end of file
components/tabber/tabbar.vue 0 → 100644
View file @ 5ed32c4b
<template>
<view class='p-tabber'>
<view class="dock">
<view class="dock-tabbar">
<view v-for="(item,index) in tabBarList" :key="index" @click="selectTab(index,item.pagePath)">
<view class="itemView" >
<image :src="current==index?item.selectedIconPath:item.iconPath"></image>
<label :class="current==index?'selectTab':'noSelectTab'">{{item.text}}</label>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
current:Number
},
data() {
return {
selectTabId:0,
"tabBarList": [
{
"id":0,
"pagePath": "uni:/pages/index/index",
"iconPath": "/static/tab/indexfh.png",
"selectedIconPath": "/static/tab/indexf.png",
"text": "首页"
},
{
"id":1,
"pagePath": "uni:/pages/bill/index",
"iconPath": "/static/tab/billh.png",
"selectedIconPath": "/static/tab/bill.png",
"text": "账单"
},
{
"id":2,
"pagePath": "uni:/pages/my/index",
"iconPath": "/static/tab/my-h.png",
"selectedIconPath": "/static/tab/my.png",
"text": "我的"
}
]
};
},
onLoad(option) {
console.log(current,'current')
},
methods:{
selectTab(e,url){
this.selectTabId = e
console.log(this.selectTabId,url,'999')
this.Go(url,'launch')
// this.Go(url,'redirect')
// uni.reLaunch(url)
}
}
}
</script>
<style lang="less" scoped>
.p-tabber{
width: 100vw;
height: 100vh;
background: #F7FAFF;
.dock {
position: fixed;
bottom: 0;
width: 100%;
height: 140rpx;
background:#fff; //tab背景色
.dock-tabbar {
text-align: center;
display: flex;
justify-content: space-around;
font-size: 24rpx;
margin-top: 10rpx;
color: #fff;
font: bold;
.tabbar-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
// border-top: 1px solid #ddd;
}
.tabbar-item.active {
color: #2263E6;
}
.itemView {
// background-color: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
}
label {
margin-top: 10rpx;
}
}
.itemView2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
}
label {
margin-top: 10rpx;
}
}
.noSelectTab {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #BBBBBB;
}
.selectTab {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #2263E6;
}
}
}
}
</style>
\ No newline at end of file
config/api.js
View file @ 5ed32c4b
......@@ -30,7 +30,7 @@ let env = process.env.VUE_APP_BASE_NODE_ENV
*/
// #ifdef APP-PLUS
env = "prod";
env = "stest";
// #endif
console.log("env", env);
......
main.js
View file @ 5ed32c4b
......@@ -8,9 +8,11 @@ import mixin from './mixin/index'
import Modal from './components/modal/modal'
import goodsItem from './components/goodsItem/index'
import bankList from './components/bankList/bankList'
import tabbar from './components/tabber/tabbar'
import request from './utils/request.js'
Vue.component('view-modal', Modal);
Vue.component('bank-list', bankList);
Vue.component('view-tabbar', tabbar);
Vue.component('view-goods', goodsItem);
Vue.prototype.$request = request
Vue.mixin(mixin)
......
pages.json
View file @ 5ed32c4b
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
......@@ -288,35 +290,7 @@
}
}
],
"tabBar": {
"borderStyle": "white",
"color": "#BBBBBB",
"selectedColor": "#2263E6",
"iconWidth": "24px",
"height": "52px",
"fontSize": "12px",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tab/indexfh.png",
"selectedIconPath": "static/tab/indexf.png",
"text": "首页"
},
{
"pagePath": "pages/bill/index",
"iconPath": "static/tab/billh.png",
"selectedIconPath": "static/tab/bill.png",
"text": "账单"
},
{
"pagePath": "pages/my/index",
"iconPath": "static/tab/my-h.png",
"selectedIconPath": "static/tab/my.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
......
pages/.DS_Store
View file @ 5ed32c4b
No preview for this file type
pages/bill/index.vue
View file @ 5ed32c4b
......@@ -46,6 +46,8 @@
<view class='n-text'>目前还没有账单哦～</view>
<view class='n-btn' v-show="tokenShow==''" @click="goLoan">去登录</view>
</view>
<view-tabbar :current='1'/>
<!-- <pyh-tab></pyh-tab> -->
</view>
</template>
......
pages/index/index.vue
View file @ 5ed32c4b
......@@ -67,7 +67,8 @@
</scroll-view>
</view>
</view>
<view-tabbar :current='0'/>
<!-- <pyh-tab></pyh-tab> -->
</view>
</template>
......
pages/my/index.vue
View file @ 5ed32c4b
......@@ -51,7 +51,8 @@
<view class='footer-tips'>理性借贷 合理消费</view>
</view>
</view>
<view-tabbar :current='2'/>
<!-- <pyh-tab></pyh-tab> -->
</view>
</template>
......
pages/tabbar.vue 0 → 100644
View file @ 5ed32c4b
<template>
<view class='p-tabber'>
<view v-if="selectTabId==0">
<my1 />
</view>
<view v-if="selectTabId==1">
<my2 />
</view>
<view v-if="selectTabId==2">
<my3 />
</view>
<view class="dock">
<view class="dock-tabbar">
<view v-for="(item,index) in tabBarList" :key="index">
<view class="itemView" @tap="selectTab(index,item.pagePath)" v-if="index!=1">
<image :src="selectTabId==index?item.selectedIconPath:item.iconPath"></image>
<label :class="selectTabId==index?'selectTab':'noSelectTab'">{{item.text}}</label>
</view>
<view class="itemView2" @tap="selectTab(index,item.pagePath)" v-else>
<image :src="selectTabId==index?item.selectedIconPath:item.iconPath"></image>
<label :class="selectTabId==index?'selectTab':'noSelectTab'">{{item.text}}</label>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import my1 from "./index/index.vue"
import my2 from "./bill/index.vue"
import my3 from "./my/index.vue"
export default {
components:{
my1,
my2,
my3
},
data() {
return {
selectTabId:0,
"tabBarList": [
{
"id":0,
"pagePath": "/pages/index/index",
"iconPath": "/static/tab/indexfh.png",
"selectedIconPath": "/static/tab/indexf.png",
"text": "首页"
},
{
"id":1,
"pagePath": "/pages/bill/index",
"iconPath": "/static/tab/billh.png",
"selectedIconPath": "/static/tab/bill.png",
"text": "账单"
},
{
"id":2,
"pagePath": "uni:/pages/my/index",
"iconPath": "/static/tab/my-h.png",
"selectedIconPath": "/static/tab/my.png",
"text": "我的"
}
]
};
},
onLoad(option) {
console.log(option,'opyion')
},
methods:{
selectTab(e,url){
console.log(e,url,'999')
this.selectTabId = e
this.Go(url,'tab')
// uni.reLaunch(url)
}
}
}
</script>
<style lang="less" scoped>
.p-tabber{
width: 100vw;
height: 100vh;
background: #F7FAFF;
.dock {
position: fixed;
bottom: 0;
width: 100%;
height: 140rpx;
background:#fff; //tab背景色
.dock-tabbar {
text-align: center;
display: flex;
justify-content: space-around;
font-size: 24rpx;
margin-top: 10rpx;
color: tab-default-color;
font: bold;
.itemView {
// background-color: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
}
label {
margin-top: 10rpx;
}
}
.itemView2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
}
label {
margin-top: 10rpx;
}
}
.noSelectTab {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #BBBBBB;
}
.selectTab {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #2263E6;
}
}
}
}
</style>
\ No newline at end of file
uni_modules/pyh-tab/changelog.md 0 → 100644
View file @ 5ed32c4b
## 1.0.13（2023-07-05）
修改tabbar页路径，都改为index.vue
## 1.0.12（2023-06-08）
默认字体颜色改为#666666，修复上边框默认值问题，字体行高设为initial
## 1.0.11（2023-06-08）
修改默认字体颜色为#333333
## 1.0.10（2023-06-07）
字体图标路径传入方式改变，原iconPath，改为iconfont，和图片路径iconPath互斥
## 1.0.9（2023-06-07）
样式调整
## 1.0.8（2023-06-07）
示例项目兼容处理
## 1.0.7（2023-06-06）
修改文档说明
## 1.0.6（2023-06-06）
初版修改，修复已知问题，优化用户体验
## 1.0.5（2023-06-05）
初版，修复已知问题
## 1.0.4（2023-06-03）
初版，修复已知问题
## 1.0.3（2023-06-03）
初版，修复已知问题
## 1.0.2（2023-06-03）
初版，修复已知问题
## 1.0.1（2023-06-03）
初版，问题修复
## 1.0.0（2023-06-03）
初版，后续慢慢优化
uni_modules/pyh-tab/components/pyh-tab/pyh-tab.vue 0 → 100644
View file @ 5ed32c4b
<template name="pyh-tab">
<view>
<view class="tabHeight" v-if="tabBar.fixedAssist?!tabBar.fixedAssist.hide:true"></view>
<view class="pyh-tab-box" ref="pyhTabBox" :style="[{'color':tabBar.color,'background-color':(tabBar.backgroundColor||'#ffffff')},{'border-top':tabBar.borderStyle?('1px solid '+tabBar.borderStyle):'none'}]">
<image :src="tabBar.backgroundImage" mode="aspectFill" v-if="tabBar.backgroundImage" class="bgImage"></image>
<view class="tabBox" v-if="tabBar.type=='slot'" @tap.stop="tabSlotTap">
<slot></slot>
</view>
<view class="tabBox" v-else>
<template v-for="(tab,t) in tabBar.list">
<view :class="['tab',{'currentTab':tab.pagePath==currentPage}]"
@tap.stop="tabTap(tab)"
:style="{'color':tab.pagePath==currentPage?(tabBar.selectedColor||tabBar.color):tabBar.color}"
:key="t" v-if="tab.show">
<image class="tabIcon" :src="tab.pagePath==currentPage?(tab.selectedIconPath||tab.iconPath):tab.iconPath" v-if="tab.iconPath&&(!tab.type||tab.type=='image')"></image>
<view class="tabIcon" v-if="tab.iconfont&&(tab.type&&tab.type=='iconfont')">
<text class="tabIconFont">{{tab.iconfont}}</text>
</view>
<text v-if="tab.text">{{tab.text}}</text>
</view>
</template>
</view>
</view>
</view>
</template>
<script>
let domModule = null;
// #ifdef APP-NVUE
domModule = weex.requireModule('dom')
// #endif
var platform = "h5";
//#ifdef H5
platform="h5"
//#endif
//#ifdef APP-PLUS
platform="app"
//#endif
//#ifdef MP
platform="mp"
//#endif
export default {
name:"pyh-tab",
data() {
return {
tabBar:getApp().globalData.tabBar||{
show:true,
type:"default",
position:"bottom",
color: "#666666",
selectedColor: getApp()?.globalData?.mainColor||"#FF3636",
backgroundColor:"",
backgroundImage:"",
borderStyle:"",
list: [
{
"pagePath": "/pages/index/index",//页面路径，有没/开头都可以
"text": "首页",
"show":true,
"iconfont": "\ue608",//字体图标路径，和iconPath互斥
// "iconPath": "/static/tabBar/index.png",//图片路径，有没/开头都可以
// "selectedIconPath": "/static/tabBar/index-ac.png",//图片路径，有没/开头都可以
},
{
"pagePath": "/pages/bill/index",//页面路径，有没/开头都可以
"text": "账单",
"show":true,
"iconfont": "\ue606",//字体图标路径，和iconPath互斥
// "iconPath": "/static/tabBar/category.png",//图片路径，有没/开头都可以
// "selectedIconPath": "/static/tabBar/category-ac.png",//图片路径，有没/开头都可以
},
{
"pagePath": "/pages/shopping/cart/index",//页面路径，有没/开头都可以
"text": "购物车",
"show":true,
"iconfont": "\ue605",//字体图标路径，和iconPath互斥
// "iconPath": "/static/tabBar/cart.png",//含有"."则判断为图片路径，有没/开头都可以
// "selectedIconPath": "/static/tabBar/cart-ac.png",//图片路径，有没/开头都可以
},
{
"pagePath": "/pages/my/index",//页面路径，有没/开头都可以
"text": "我的",
"show":true,
"iconfont": "\ue607",//字体图标路径，和iconPath互斥
// "iconPath": "/static/tabBar/user.png",//图片路径，有没/开头都可以
// "selectedIconPath": "/static/tabBar/user-ac.png",//图片路径，有没/开头都可以
}
]
},
currentPage:"/"+(this.$parent.$page?.route||this.$parent.__page__?.route||this.$parent.$scope?.route||""),
deviceOrientation:"portrait",
windowInfo:{
width:uni.getSystemInfoSync().windowWidth,
height:uni.getSystemInfoSync().windowHeight,
},
tabBoxRect:{wait:true,top:0,width:uni.getSystemInfoSync().windowWidth}
};
},
computed:{
//安卓微信
androidwx(){
if(platform=="mp"&&uni.getSystemInfoSync().platform.indexOf("ios")==-1){
return true;
}else{
return false;
}
},
},
created() {
this.initTabBar();
domModule&&domModule.addRule('fontFace', {
'fontFamily': 'tabIconFont',
'src': "url('https://at.alicdn.com/t/font_2977155_1fvkums2uy9i.ttf?t=1638325591492.ttf')"
})
},
onUnload() {uni.offWindowResize();},
methods:{
initTabBar(){
uni.hideTabBar();
this.tabBar = Object.assign({
show:true,
type:"default",
position:"bottom",
color: "#666666",
selectedColor: getApp().globalData.mainColor||"",
backgroundColor:"",
backgroundImage:"",
borderStyle:"",
},this.tabBar)
for(let t in this.tabBar.list){
if(!this.tabBar.list[t].pagePath.startsWith("/"))this.tabBar.list[t].pagePath = "/"+this.tabBar.list[t].pagePath
this.tabBar.list[t] = Object.assign({
show:true,
type:(this.tabBar.list[t].iconfont?'iconfont':'image')
},this.tabBar.list[t])
if(this.tabBar.list[t].type!='iconfont'){
if(!this.tabBar.list[t].iconPath.startsWith("/"))this.tabBar.list[t].iconPath = "/"+this.tabBar.list[t].iconPath
if(this.tabBar.list[t].selectedIconPath&&!this.tabBar.list[t].selectedIconPath.startsWith("/"))this.tabBar.list[t].selectedIconPath = "/"+this.tabBar.list[t].selectedIconPath
}
}
},
tabSlotTap(e){
//slot点击
this.$emit("tabSlotTap");
},
tabTap(tab,index){
console.log(tab,'tab')
this.$emit("tabTap",Object.assign(tab,{index}))
if(tab.pagePath!=this.currentPage){
this.linkTo({currentTarget:{dataset:{type:'switchTab',url:tab.pagePath}}})
}
},
linkTo(e) {
//跳转
var url=e.currentTarget.dataset.url,
type=e.currentTarget.dataset.type;
if(this.$nv){
this.$nv(url,type);
}else{
if(!url&&!type)return;
if(url=="/"||url==".")return;
if(typeof(url)=="object"){
uni.navigateTo(url);
return
}
if(typeof(url)=="number"){
if(this.currentPages==1){
uni.reLaunch({url:this.home})
}else{
uni.navigateBack({delta:Math.abs(url||1)})
}
return;
}
if(type){
if (type.indexOf("ab")>-1) {
uni.switchTab({ url: url });
} else if (type=='-1'||type.indexOf("redirect")>-1||type.indexOf("rep")>-1) {
uni.redirectTo({ url: url });
} else if (type.indexOf("aunch")>-1) {
uni.reLaunch({ url: url });
} else if (type.indexOf("ack")>-1) {
if(this.currentPages==1){
uni.reLaunch({url:this.home});
}else{
uni.navigateBack();
}
}else{
uni.navigateTo({url:url});
}
}else{
if(url.indexOf("/")==0||url.indexOf(".")==0){
uni.navigateTo({url:url});
}else{
if(url.indexOf("?")>0){url+="&platform="+platform;}else{url+="?platform="+platform;};
if(platform=="h5"){
top.location.href=url;
}else if(platform=="app"){
plus.runtime.openUrl(url);
}else{
uni.navigateTo({url:"/pages/other/webview/webview?src="+url.replace("?","&")});
}
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
@font-face {
font-family: tabIconFont;
src: url('https://at.alicdn.com/t/font_2977155_1fvkums2uy9i.ttf?t=1638325591492.ttf') format('truetype');
}
/* #endif */
.tabIconFont {
font-family: tabIconFont;
font-size: 50rpx;
font-style: normal;
}
//主色，可以设置uni.scss的$mainColor
//或
//uni.scss未定义或定义为null,修改下方$mainColor的默认值
$mainColor: #FF3636 !default;
.tabHeight{height: 50px;width: 100%;}
.pyh-tab-box{font-size: 12px;z-index: 991;position: fixed;bottom: 0;width: 100%;height: 50px;line-height: initial;background-color: #ffffff;}
.bgImage{width: 100%;height: 100%;}
.tabBox{height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.tab{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;align-items: center;overflow: hidden;}
.currentTab{color: $mainColor;}
.tabIcon{width: 50rpx;height: 50rpx;margin-bottom: 6rpx;}
</style>
\ No newline at end of file
uni_modules/pyh-tab/package.json 0 → 100644
View file @ 5ed32c4b
{
"id": "pyh-tab",
"displayName": "pyh-tab，自定义tabBar栏",
"version": "1.0.13",
"description": "pyh-tab，自定义tabBar栏，支持slot插槽、字体图标、图片图标，可选填入图标、文字",
"keywords": [
"pyh-tab，tabBar栏，字体图标"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/pyh-tab/readme.md 0 → 100644
View file @ 5ed32c4b
### pyh-tab 全自定义tab栏
pyh-tab tabBar栏组件，组件名：``pyh-tab``，代码块： pyh-tab。
**使用方式：**
uni_modules:
[uni_modules使用方法](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)；
非uni_modules:
[如何从插件市场下载使用组件](https://ask.dcloud.net.cn/article/35409)
uni-app插件市场的插件详情页，右上角uni_modules版本下载插件ZIP，解压/拉入components文件夹到 uni-app 根目录
在 ``main.js`` 中引用组件 (示例项目main.js有注释，去掉对应注释可以直接使用)
```javascript
import tab from "@/components/pyh-tab/pyh-tab.vue";
// #ifndef VUE3
Vue.component("pyh-tab",tab)
// #endif
// #ifdef VUE3
//在const app = createSSRApp(App)后添加
app.component('pyh-tab',tab)
// #endif
```
在 ``template`` 中使用组件
```html
<pyh-tab></pyh-tab>
```
在 ``script`` 中 tabBar 说明
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
所有配置都为选填,无需要可以不配置,不复杂!!!</br>
**pyh-tab.vue 内配置说明：**
涉及到全局变量[getApp().globalData](https://uniapp.dcloud.net.cn/collocation/App.html#globaldata)
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|mainColor |String |'#FF3636' |tabBar栏的活动态颜色，可以通过getApp().globalData.mainColor或自定义颜色，本人开发的导航栏pyh-nv也用这个，注意区分兼容|
|tabBar |Object | |可设置后覆盖组件内默认配置，详细配置见下方tabBar说明 |
**tabBar 属性说明：**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|show |Boolean|true |是否显示tabBar栏，可以用于多情形控制tabBar栏的显示|
|fixedAssist |Object | |固定定位辅助容器，不填默认存在，{hide:false}|
|type |String |'default' |目前有default（常规）和slot（自定义插槽）|
|position |String |'bottom' |定位属性，暂时只支持bottom|
|color |String |'#666666' |tabBar栏字体/字体图标常态颜色|
|selectedColor |String |mainColor |tabBar栏字体/字体图标活动态颜色，默认值为getApp().globalData.mainColor，可覆盖|
|backgroundColor |String |'' |tabBar栏背景色，铺满tabBar栏|
|backgroundImage |String |'' |tabBar栏背景图，铺满tabBar栏|
|borderStyle |String |'' |tabBar栏上边框颜色，不填不显示边框|
|list |Array |[] |tabBar栏子项列表，详细配置见下方list数组的子项说明|
**list数组的子项 属性说明：**
|属性名 |类型 |默认值 |说明 |
|--- |---- |--- |--- |
|show |Boolean|true |是否显示当前项，可以用于多情形控制tabBar子项的显示|
|pagePath |String |页面路径 |当前项页面路径，如：/pages/index/index,有没/开头都可以|
|text |String |'' |当前项文字描述，可不填为空|
|iconPath |String |'' |当前项常态的图标，填入图片路径，有没/开头都可以|
|selectedIconPath |String |'' |当项活动态的图标，同于iconPath格式，可不传同iconPath|
|iconfont |String |'' |字体图标路径(可在组件内更换字体图标的引入)，和iconPath互斥，活动态时自动变为活动色|
**组件pyh-tab 事件说明(详情请参考示例项目)：**
|属名 |说明 |
|--- |---- |
|tabSlotTap |tabBar.type为slot时，tabBar点击事件 |
|tabTap |点击子项，触发事件，返回子项属性和下标 |
**感谢：**
> 有更多优化建议和需求，请联系作者 panyh 。谢谢！
\ No newline at end of file
unpackage/dist/dev/app-plus/app-service.js
View file @ 5ed32c4b
This source diff could not be displayed because it is too large. You can view the blob instead.
unpackage/dist/dev/app-plus/app-view.js
View file @ 5ed32c4b
This diff is collapsed.
unpackage/dist/dev/app-plus/manifest.json
View file @ 5ed32c4b
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment