bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsC/tabs/tabs.nvue
+232
View File
@@ -0,0 +1,232 @@
<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"
>
</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="list4"
lineWidth="20"
lineHeight="7"
:lineColor="`url(${lineBg}) 100% 100%`"
: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>
const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=";
export default {
mixins: [uni.$u.mixin],
data() {
return {
lineBg,
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>