Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 af8e4595 编写于 作者: H hdx
浏览文件
操作

custom-tab-bar: 调整箭头效果，合并为1个

上级 e53744fe
隐藏空白更改
内联 并排
Showing with 75 addition and 304 deletion
pages.json
浏览文件 @ af8e4595
......@@ -933,12 +933,6 @@
"style": {
"navigationBarTitleText": "自定义TabBar"
}
},
{
"path": "pages/template/custom-tab-bar2/custom-tab-bar2",
"style": {
"navigationBarTitleText": "自定义TabBar2"
}
}
],
"globalStyle": {
......
pages/tabBar/template.uvue
浏览文件 @ af8e4595
......@@ -172,16 +172,8 @@ export default {
url: 'custom-tab-bar',
name: '自定义TabBar',
open: false,
pages: [
{
name: '滚动切换图标',
url:'custom-tab-bar'
},
{
name: '凹口',
url:'custom-tab-bar2'
},
] as Page[],
enable: true,
pages: [] as Page[],
},
{
id: 'calendar',
......
pages/template/custom-tab-bar/custom-tab-bar.uvue
浏览文件 @ af8e4595
<template>
<view class="custom-tab-bar">
<view class="tab-view">
<view class="tabs">
<view ref="tabview" class="tab-view">
<tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
<tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
</view>
<view class="tab-bar">
<view ref="tabbar" class="tab-bar">
<view class="tab-item" @click="onTabClick(0)">
<view ref="tab-item1" class="tab-item-content">
<text class="tab-item-icon tab-item-icon1 uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
{{'\ue6be'}}
<text v-if="displayArrow" class="tab-item-icon tab-item-arrow uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
{{'\ue6bd'}}
</text>
<text v-if="!displayArrow" class="tab-item-icon uni-icon"
:class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
<text v-if="!displayArrow" class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
首页
</text>
</view>
</view>
<view>
<image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
<view class="btn-plus" @click="onPlusClick">
<text class="btn-plus-text">+</text>
</view>
</view>
<view class="tab-item" @click="onTabClick(1)">
......@@ -50,17 +61,20 @@
init: false
} as TabItem,
] as TabItem[],
selectedIndex: -1
selectedIndex: -1,
displayArrow: false,
$tabViewHeight: 0
}
},
onLoad() {
uni.$on('tabchange', this.onTabPageEvent)
},
onUnload() {
uni.$off('tabchange', this.onTabPageEvent)
},
onReady() {
this.setSelectedIndex(0)
this.$tabViewHeight = (this.$refs["tabview"] as Element).getBoundingClientRect().height
},
onUnload() {
uni.$off('tabchange', this.onTabPageEvent)
},
methods: {
onTabClick(index : number) {
......@@ -70,9 +84,10 @@
}
},
onTabPageEvent(top : number) {
const tabItem1 = this.$refs["tab-item1"] as Element
const angle = top < 50 ? 0 : 180
tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
// const tabItem1 = this.$refs["tab-item1"] as Element
this.displayArrow = top > this.$tabViewHeight
// const angle = displayIcon ? 180 : 0
// tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
},
setSelectedIndex(index : number) {
if (this.selectedIndex === index) {
......@@ -82,6 +97,13 @@
this.tabList[index].init = true
}
this.selectedIndex = index
},
onPlusClick() {
uni.showModal({
title: "提示",
content: "你点击了 +",
showCancel: false
})
}
}
}
......@@ -95,12 +117,14 @@
.uni-icon {
font-family: "UniIcon";
font-size: 18px;
font-size: 16px;
font-style: normal;
}
.custom-tab-bar {
.tabs {
flex: 1;
background-color: #fff;
overflow: visible;
}
.tab-view {
......@@ -112,14 +136,16 @@
}
.tab-bar {
background-color: #f0f0f0;
border-top: 1px solid #dbdbdb;
flex-direction: row;
height: 56px;
overflow: visible;
}
.tab-item {
flex: 1;
position: relative;
background-color: #1e90ff;
overflow: visible;
}
.tab-item-content {
......@@ -128,24 +154,50 @@
}
.tab-item-icon {
color: #555;
color: #ccc;
font-size: 12px;
text-align: center;
margin-bottom: 4px;
}
.tab-item-text {
color: #555;
color: #ccc;
font-size: 12px;
margin-top: 4px;
text-align: center;
}
.tab-item-text-active {
color: #007AFF;
color: #fff;
}
.tab-item-icon1 {
.tab-item-arrow {
font-size: 30px !important;
font-weight: bold;
}
.concave-image {
width: 115px;
height: 56px;
}
.btn-plus {
position: absolute;
left: 23px;
width: 70px;
height: 70px;
border-radius: 50px;
background-color: #FE5722;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
/* margin-left: auto;
margin-right: auto; */
margin-top: -35px;
align-items: center;
justify-content: center;
overflow: visible;
}
.btn-plus-text {
color: #fff;
font-size: 32px;
}
</style>
pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue 已删除 100644 → 0
浏览文件 @ e53744fe
<template>
<list-view ref="listView" class="list" :rebound="false" :scroll-y="true" @scrolltolower="loadData()"
@scroll="onScroll">
<list-item class="list-item" v-for="(item, index) in dataList" :key="index">
<text class="title">{{item.title}}</text>
</list-item>
</list-view>
</template>
<script>
type ListItem = {
title : string
}
export default {
data() {
return {
dataList: [] as ListItem[]
}
},
created() {
this.loadData()
},
methods: {
loadData() {
let index = this.dataList.length
for (let i = 0; i < 10; i++) {
this.dataList.push({
title: index.toString(),
} as ListItem)
index++
}
},
onScroll(e : ScrollEvent) {
uni.$emit('tabchange', e.detail.scrollTop)
},
scrollTop(top : number) {
(this.$refs["listView"] as Element).setAttribute('scrollTop', top)
}
}
}
</script>
<style>
.list {
flex: 1;
background-color: #ffffff;
}
.list-item {
flex-direction: row;
padding: 30px;
border-bottom: 1px solid #dbdbdb;
}
.title {
font-size: 16px;
text-align: center;
}
</style>
\ No newline at end of file
pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue 已删除 100644 → 0
浏览文件 @ e53744fe
<template>
<view class="page">
<button type="primary">登录</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style>
.page {
padding: 15px;
}
</style>
\ No newline at end of file
pages/template/custom-tab-bar2/custom-tab-bar2.uvue 已删除 100644 → 0
浏览文件 @ e53744fe
<template>
<view class="tabs">
<view class="tab-view">
<tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
<tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
</view>
<view ref="tabbar" class="tab-bar">
<view class="tab-item" @click="onTabClick(0)">
<view ref="tab-item1" class="tab-item-content">
<text class="tab-item-icon uni-icon"
:class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
<text class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
列表
</text>
</view>
</view>
<view>
<image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
<view class="btn-plus" @click="onPlusClick">
<text class="btn-plus-text">+</text>
</view>
</view>
<view class="tab-item" @click="onTabClick(1)">
<view ref="tab-item2" class="tab-item-content">
<text class="tab-item-icon uni-icon"
:class="selectedIndex==1 ? 'tab-item-text-active' : ''">{{'\ue699'}}</text>
<text class="tab-item-text" :class="selectedIndex==1 ? 'tab-item-text-active' : ''">
我的
</text>
</view>
</view>
</view>
</view>
</template>
<script>
import tab1 from './custom-tab-bar2-tab1.uvue';
import tab2 from './custom-tab-bar2-tab2.uvue';
type TabItem = {
init : boolean,
preload : boolean,
}
export default {
components: {
tab1,
tab2
},
data() {
return {
tabList: [
{
init: false
} as TabItem,
{
init: false
} as TabItem,
] as TabItem[],
selectedIndex: -1
}
},
onReady() {
this.setSelectedIndex(0)
},
methods: {
onTabClick(index : number) {
this.setSelectedIndex(index);
if (index == 0) {
(this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
}
},
onTabPageEvent(top : number) {
const tabItem1 = this.$refs["tabs-item1"] as Element
const angle = top < 50 ? '0deg' : '180deg'
tabItem1.style.setProperty('transform', `rotate(${angle})`)
},
setSelectedIndex(index : number) {
if (this.selectedIndex === index) {
return
}
if (!this.tabList[index].init) {
this.tabList[index].init = true
}
this.selectedIndex = index
},
onPlusClick() {
uni.showModal({
title: "提示",
content: "你点击了 +",
showCancel: false
})
}
}
}
</script>
<style>
@font-face {
font-family: "UniIcon";
src: url('@/static/fonts/uni-icon.ttf');
}
.uni-icon {
font-family: "UniIcon";
font-size: 16px;
font-style: normal;
}
.tabs {
flex: 1;
background-color: #fff;
overflow: visible;
}
.tab-view {
flex: 1;
}
.tab-view-item {
flex: 1;
}
.tab-bar {
flex-direction: row;
height: 56px;
overflow: visible;
}
.tab-item {
flex: 1;
position: relative;
background-color: #1e90ff;
overflow: visible;
}
.tab-item-content {
margin: auto;
}
.tab-item-icon {
color: #ccc;
font-size: 12px;
text-align: center;
margin-bottom: 4px;
}
.tab-item-text {
color: #ccc;
font-size: 12px;
text-align: center;
}
.tab-item-text-active {
color: #fff;
}
.concave-image {
width: 115px;
height: 56px;
}
.btn-plus {
position: absolute;
left: 23px;
width: 70px;
height: 70px;
border-radius: 50px;
background-color: #FE5722;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
/* margin-left: auto;
margin-right: auto; */
margin-top: -35px;
align-items: center;
justify-content: center;
overflow: visible;
}
.btn-plus-text {
color: #fff;
font-size: 32px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或