123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <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>
|