You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
3.7 KiB
187 lines
3.7 KiB
<template>
|
|
<niu-page>
|
|
<niu-navbar fixed color="white" middleLayout='left' bg="#39b54a">
|
|
Tabs
|
|
</niu-navbar>
|
|
<view style="font-size: 35rpx;">
|
|
<niu-tabs :list="colorList" @change="change" v-model="active"></niu-tabs>
|
|
</view>
|
|
<niu-tabs :list="colorList" @change="change" capsule v-model="active"></niu-tabs>
|
|
<niu-tabs :list="colorList" :bar="false" @change="change" v-model="active">
|
|
<template #bar="{show, barLeft, barWidth, anim, props}">
|
|
<view v-if="show" :style="[
|
|
{
|
|
transition: anim?'left .3s ease':'',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
left: (barLeft+barWidth/4-9) + 'px',
|
|
height: '55%',
|
|
border: `1px solid ${props.activeColor}`,
|
|
borderRadius: '100rpx',
|
|
bottom: 0,
|
|
width: (barWidth/2 + 18) + 'px',
|
|
}
|
|
]"></view>
|
|
</template>
|
|
</niu-tabs>
|
|
<niu-tabs :list="fiveList" full :barPer=".8" @change="change" v-model="active"></niu-tabs>
|
|
<niu-tabs :list="fiveList" full :barPer=".8" @change="change" capsule v-model="active"></niu-tabs>
|
|
<niu-tabs :list="colorList" :active-color="colorList[active]&&colorList[active].color" :bar="false"
|
|
@change="change" v-model="active">
|
|
<template #bar="{show, barLeft, barWidth, anim, props, item}">
|
|
<view v-if="show" :style="[
|
|
{
|
|
transition: anim?'left .3s ease':'',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
left: (barLeft+barWidth/4-9) + 'px',
|
|
height: '55%',
|
|
border: `1px solid ${item.color || props.activeColor}`,
|
|
borderRadius: '100rpx',
|
|
bottom: 0,
|
|
width: (barWidth/2 + 18) + 'px',
|
|
}
|
|
]"></view>
|
|
</template>
|
|
</niu-tabs>
|
|
<niu-tabs :list="fiveList" @change="change" v-model="active"></niu-tabs>
|
|
<button type="default" @click="cilck">点击</button>
|
|
<view>{{$n.data.navbarTop}}px</view>
|
|
<!-- <cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell> -->
|
|
</niu-page>
|
|
</template>
|
|
|
|
<script>
|
|
import cell from "./cell.vue"
|
|
export default {
|
|
components: {
|
|
cell
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
buildingArea: ''
|
|
},
|
|
active: 2,
|
|
fiveList: [{
|
|
text: "金吒"
|
|
},
|
|
{
|
|
text: "木吒"
|
|
},
|
|
{
|
|
text: "水吒"
|
|
},
|
|
{
|
|
text: "火吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
}
|
|
],
|
|
colorList: [{
|
|
text: "嫣红",
|
|
color: "#e54d42"
|
|
},
|
|
{
|
|
text: "桔橙",
|
|
color: "#f37b1d"
|
|
},
|
|
{
|
|
text: "明黄",
|
|
color: "#fbbd08"
|
|
},
|
|
{
|
|
text: "橄榄",
|
|
color: "#8dc63f"
|
|
},
|
|
{
|
|
text: "森绿",
|
|
color: "#39b54a"
|
|
},
|
|
{
|
|
text: "天青",
|
|
color: "#1cbbb4"
|
|
},
|
|
{
|
|
text: "海蓝",
|
|
color: "#0081ff"
|
|
},
|
|
{
|
|
text: "姹紫",
|
|
color: "#6739b6"
|
|
},
|
|
{
|
|
text: "木槿",
|
|
color: "#9c26b0"
|
|
},
|
|
{
|
|
text: "桃粉",
|
|
color: "#e03997"
|
|
},
|
|
{
|
|
text: "棕褐",
|
|
color: "#a5673f"
|
|
},
|
|
{
|
|
text: "玄灰",
|
|
color: "#8799a3"
|
|
},
|
|
{
|
|
text: "草灰",
|
|
color: "#aaaaaa"
|
|
},
|
|
{
|
|
text: "墨黑",
|
|
color: "#333333"
|
|
},
|
|
{
|
|
text: "雅白",
|
|
color: "#ffffff"
|
|
},
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
cilck() {
|
|
this.fiveList = [{
|
|
text: "金吒"
|
|
},
|
|
{
|
|
text: "木吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
{
|
|
text: "土吒22222"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
{
|
|
text: "土吒"
|
|
},
|
|
]
|
|
},
|
|
change(index) {
|
|
console.log(index);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|
|
|