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.
113 lines
3.3 KiB
113 lines
3.3 KiB
<template>
|
|
<niu-page>
|
|
<niu-navbar fixed color="white" bg="#39b54a">
|
|
Tabs
|
|
</niu-navbar>
|
|
<niu-tabs :list="colorList" @change="change" v-model="active"></niu-tabs>
|
|
<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>
|
|
|