no message
This commit is contained in:
PC-202306242200\Administrator
12
uni_modules/cc-myTabbar/changelog.md
Normal file
12
uni_modules/cc-myTabbar/changelog.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## 2.2.4（2024-10-03）
|
||||
组件优化
|
||||
## 2.2.2（2024-07-13）
|
||||
组件优化
|
||||
## 2.2（2024-06-27）
|
||||
优化
|
||||
## 2.0（2024-05-16）
|
||||
组件优化
|
||||
## 1.0.1（2023-06-22）
|
||||
组件使用说明优化
|
||||
## 1.0.0（2023-06-22）
|
||||
组件初始化
|
||||
@@ -0,0 +1,41 @@
|
||||
/* 主要颜色 */
|
||||
$base: #4879e6; // 基础颜色
|
||||
.page-total{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
// height: 100rpx;
|
||||
}
|
||||
.tab-list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
padding-bottom: 10px;
|
||||
background-color: #FFFFFF;
|
||||
.list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20%;
|
||||
height: 120rpx;
|
||||
image{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background-color: white;
|
||||
|
||||
|
||||
}
|
||||
text{
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.action{
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
}
|
||||
130
uni_modules/cc-myTabbar/components/cc-myTabbar/cc-myTabbar.vue
Normal file
130
uni_modules/cc-myTabbar/components/cc-myTabbar/cc-myTabbar.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view class="page-total">
|
||||
<view class="tab-list">
|
||||
<view class="list" v-for="(item,index) in TabBarList"
|
||||
@click="onTabBar(item,index)" :style="{marginTop: (index == 2) ? '-18px' : '0px'}"
|
||||
:key="index">
|
||||
<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === index" :style="{width: (index == 2) ? '40px' : '24px',borderRadius: (index == 2) ? '12px' : '0px'}"></image>
|
||||
<image :src="item.img" mode="widthFix" v-show="tabBarShow != index" :style="{width: (index == 2) ? '40px' : '24px',borderRadius: (index == 2) ? '12px' : '0px'}"></image>
|
||||
|
||||
<!-- background: (index == 2) ? 'red' : '' -->
|
||||
<text :class="{'action':tabBarShow===index}" :style="{marginTop: (index == 2) ? '4px' : '0px'}">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
TabBarList:[
|
||||
{
|
||||
index: 0,
|
||||
name: '首页',
|
||||
img: '/static/tabbar/select_home.png',
|
||||
acImg: '/static/tabbar/home.png'
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
name: '地图',
|
||||
img: '/static/tabbar/select_sq.png',
|
||||
acImg: '/static/tabbar/sq.png'
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: '扫一扫',
|
||||
img: '/static/tabbar/find.png',
|
||||
acImg: '/static/tabbar/find.png'
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: '订单',
|
||||
img: '/static/tabbar/select_order.png',
|
||||
acImg: '/static/tabbar/order.png'
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: '我的',
|
||||
img: '/static/tabbar/select_my.png',
|
||||
acImg: '/static/tabbar/my.png'
|
||||
},
|
||||
],
|
||||
codeheight: 0,
|
||||
isOverall: 0,
|
||||
phoneModel: '',
|
||||
};
|
||||
},
|
||||
props:{
|
||||
tabBarShow: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
try {
|
||||
const res = uni.getSystemInfoSync();
|
||||
let that = this;
|
||||
// 获取系统信息
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
console.log(res.brand) //手机牌子
|
||||
console.log(res.model) //手机型号
|
||||
console.log(res.screenWidth) //屏幕宽度
|
||||
console.log(res.screenHeight) //屏幕高度
|
||||
that.codeheight = Math.round(res.screenHeight);
|
||||
that.phoneModel =res.model
|
||||
if(res.model.search('iPhone')){
|
||||
that.isOverall = 0;
|
||||
}else if(Math.round(res.screenHeight)>740){
|
||||
that.isOverall = 1;
|
||||
}
|
||||
console.log(that.isOverall);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* @param {Object} item
|
||||
* @param {Number} index
|
||||
*/
|
||||
onTabBar(item,index){
|
||||
// this.tabBarShow = index;
|
||||
switch (index){
|
||||
case 0:
|
||||
uni.switchTab({
|
||||
url:'/pages/home/home'
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
uni.switchTab({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
uni.switchTab({
|
||||
url:'/pages/sweep/sweep'
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
uni.switchTab({
|
||||
url:'/pages/order/order'
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
uni.switchTab({
|
||||
url:'/pages/mine/mine'
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'cc-myTabbar.scss';
|
||||
</style>
|
||||
86
uni_modules/cc-myTabbar/package.json
Normal file
86
uni_modules/cc-myTabbar/package.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "cc-myTabbar",
|
||||
"displayName": "自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP",
|
||||
"version": "2.2.4",
|
||||
"description": "自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏Home键小程序和APP 可自定义tabbar图片文字大小及位置",
|
||||
"keywords": [
|
||||
"tabbar",
|
||||
"自定义tabbar",
|
||||
"底部导航",
|
||||
"自定义",
|
||||
"凸起导航"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.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",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"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",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
89
uni_modules/cc-myTabbar/readme.md
Normal file
89
uni_modules/cc-myTabbar/readme.md
Normal file
@@ -0,0 +1,89 @@
|
||||
# cc-myTabbar
|
||||
|
||||
|
||||
##uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板
|
||||
|
||||
###●组件模板规划：
|
||||
由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。
|
||||
|
||||
合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；
|
||||
|
||||
###●组件模板效果图：
|
||||
可下载项目后预览，效果图见右侧图片；
|
||||
|
||||
###●组件模板费用：
|
||||
学习：免费下载，进行学习，无费用；
|
||||
|
||||
使用/商用：本页面地址赞赏10元后，可终身商用；
|
||||
|
||||
###●组件模板使用版权/商用：
|
||||
本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元
|
||||
|
||||
（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）
|
||||
|
||||
赞赏10后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）
|
||||
|
||||
|
||||
|
||||
### 我的技术公众号(私信可加前端技术交流群)
|
||||
|
||||
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||
|
||||
|
||||
|
||||
|
||||
#### 使用方法
|
||||
```使用方法
|
||||
<!-- tabBarShow：显示第几个tabbar -->
|
||||
<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
|
||||
|
||||
<!-- 隐藏原生tabbar -->
|
||||
onReady() {
|
||||
uni.hideTabBar()
|
||||
}
|
||||
|
||||
<!-- 页面距离底部140rpx(自定义tabbar的高度) -->
|
||||
page {
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
```
|
||||
|
||||
#### HTML代码实现部分
|
||||
```html
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- tabBarShow：显示第几个tabbar -->
|
||||
<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
uni.hideTabBar()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
padding-bottom: 140rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user