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.
209 lines
3.6 KiB
209 lines
3.6 KiB
<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">基础演示</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs :list="list1" @click="click" :current="3">
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="u-demo-block"
|
|
style="margin-bottom: 0;"
|
|
>
|
|
<text class="u-demo-block__title">粘性布局</text>
|
|
</view>
|
|
<u-sticky bgColor="#fff">
|
|
<u-tabs
|
|
:list="list1"
|
|
sticky
|
|
>
|
|
</u-tabs>
|
|
</u-sticky>
|
|
<u-gap
|
|
height="23"
|
|
bgColor="#fff"
|
|
></u-gap>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">显示徽标</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs :list="list2">
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">禁止滚动</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs :list="list6" :scrollable="false">
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">禁用菜单</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs :list="list3">
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义样式</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs
|
|
:list="list4"
|
|
lineWidth="30"
|
|
lineColor="#f56c6c"
|
|
:activeStyle="{
|
|
color: '#303133',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
}"
|
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
|
|
>
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">右侧自定义插槽</text>
|
|
<view class="u-demo-block__content">
|
|
<u-tabs :list="list1">
|
|
<view
|
|
slot="right"
|
|
style="padding-left: 4px;"
|
|
@tap="$u.toast('插槽被点击')"
|
|
>
|
|
<u-icon
|
|
name="list"
|
|
size="21"
|
|
bold
|
|
></u-icon>
|
|
</view>
|
|
</u-tabs>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mixins: [uni.$u.mixin],
|
|
data() {
|
|
return {
|
|
list1: [{
|
|
name: '关注',
|
|
}, {
|
|
name: '推荐',
|
|
}, {
|
|
name: '电影'
|
|
}, {
|
|
name: '科技'
|
|
}, {
|
|
name: '音乐'
|
|
}, {
|
|
name: '美食'
|
|
}, {
|
|
name: '文化'
|
|
}, {
|
|
name: '财经'
|
|
}, {
|
|
name: '手工'
|
|
}],
|
|
list2: [{
|
|
name: '关注'
|
|
}, {
|
|
name: '推荐',
|
|
badge: {
|
|
isDot: true
|
|
}
|
|
}, {
|
|
name: '电影',
|
|
badge: {
|
|
value: 5,
|
|
}
|
|
}, {
|
|
name: '科技'
|
|
}, {
|
|
name: '音乐'
|
|
}, {
|
|
name: '美食'
|
|
}, {
|
|
name: '文化'
|
|
}, {
|
|
name: '财经'
|
|
}, {
|
|
name: '手工'
|
|
}],
|
|
list3: [{
|
|
name: '关注'
|
|
}, {
|
|
name: '推荐',
|
|
}, {
|
|
name: '电影',
|
|
disabled: true
|
|
}, {
|
|
name: '科技'
|
|
}, {
|
|
name: '音乐'
|
|
}, {
|
|
name: '美食'
|
|
}, {
|
|
name: '文化'
|
|
}, {
|
|
name: '财经'
|
|
}, {
|
|
name: '手工'
|
|
}],
|
|
list4: [{
|
|
name: '关注'
|
|
}, {
|
|
name: '推荐',
|
|
badge: {
|
|
isDot: true
|
|
}
|
|
}, {
|
|
name: '电影',
|
|
}, {
|
|
name: '科技'
|
|
}, {
|
|
name: '音乐'
|
|
}, {
|
|
name: '美食'
|
|
}, {
|
|
name: '文化'
|
|
}, {
|
|
name: '财经'
|
|
}, {
|
|
name: '手工'
|
|
}],
|
|
list6: [
|
|
{
|
|
name: '关注'
|
|
}, {
|
|
name: '推荐',
|
|
}, {
|
|
name: '电影',
|
|
}, {
|
|
name: '科技'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
click(item) {
|
|
console.log('item', item);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
padding-bottom: 500px;
|
|
}
|
|
</style>
|
|
|