Commit e3c5744e authored by yiruiwen's avatar yiruiwen

Merge branch 'dev' into yiruiwen

parents c4ab4f73 8e8d97fe
......@@ -19,7 +19,7 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
## [官方文档:https://www.uviewui.com](https://www.uviewui.com)
### [点击加群交流反馈:1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
### [点击加群交流反馈:1084514613](https://jq.qq.com/?_wv=1027&k=uyZUkSlo)
## 特性
......
......@@ -5,7 +5,7 @@
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list"
@change="change" :current="current" :is-scroll="isScroll"></u-tabs>
@change="change" :current="current" :is-scroll="isScroll" :offset="offset"></u-tabs>
</view>
</view>
<view class="u-config-wrap">
......@@ -38,9 +38,11 @@
return {
list: [],
data: [{
name: '关注'
name: '关注',
count: 100
}, {
name: '推荐'
name: '推荐',
count: 7
}, {
name: '电影'
},{
......@@ -62,7 +64,8 @@
tabCountIndex: 0,
activeColor: this.$u.color['primary'],
bold: true,
control: true
control: true,
offset: [5, -5]
}
},
onLoad() {
......@@ -75,17 +78,20 @@
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
this.offset = [5, 60]
} else if(index == 1) {
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
this.list.push(this.data[2]);
this.offset = [5, 20]
} else {
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
this.list.push(this.data[2]);
this.list.push(this.data[3]);
this.offset = [5, 5]
}
this.tabCountIndex = index;
this.isScroll = false;
......@@ -99,6 +105,7 @@
if(index == 0) {
this.isScroll = true;
this.list = this.data;
this.offset = [5, -5]
} else {
this.isScroll = false;
this.countChange(this.tabCountIndex);
......
......@@ -278,7 +278,8 @@ export default {
name: '待收货'
},
{
name: '待评价'
name: '待评价',
count: 12
}
],
current: 0,
......
......@@ -12,7 +12,7 @@
:custom-prefix="customPrefix"
:show-decimal-icon="showDecimalIcon(index)"
:percent="decimal"
:inactiveColor="inactiveColor"
:inactive-color="inactiveColor"
></u-icon>
</view>
</view>
......
......@@ -7,6 +7,7 @@
<view class="u-tabs-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class="u-tabs-item" :style="[tabItemStyle(index)]"
v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emit(index)">
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
{{ item[name] || item['name']}}
</view>
<view v-if="showBar" class="u-scroll-bar" :style="[tabBarStyle]"></view>
......@@ -18,9 +19,7 @@
<script>
import colorGradient from '../../libs/function/colorGradient';
let color = colorGradient;
const {
windowWidth
} = uni.getSystemInfoSync();
const { windowWidth } = uni.getSystemInfoSync();
const preId = 'UEl_';
/**
......@@ -43,6 +42,8 @@
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
* @property {String} count 组件内部读取的list参数中的属性名(badge徽标数),同name属性的使用,见官网说明(默认count)
* @property {Array} offset 设置badge徽标数的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx(默认[5, 20])
* @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发
* @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
......@@ -127,11 +128,23 @@
type: String,
default: 'window'
},
// 读取传入的数组对象的属性
// 读取传入的数组对象的属性(tab名称)
name: {
type: String,
default: 'name'
},
// 读取传入的数组对象的属性(徽标数)
count: {
type: String,
default: 'count'
},
// 徽标数位置偏移
offset: {
type: Array,
default: () => {
return [5, 20]
}
},
// 活动tab字体是否加粗
bold: {
type: Boolean,
......
......@@ -8,6 +8,7 @@
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
:style="[tabItemStyle(index)]">
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
{{ item[name] || item['name']}}
</view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
......@@ -38,7 +39,9 @@
* @property {String Number} item-width 标签的宽度(默认auto)
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
* @property {String} name 组件内部读取的list参数中的属性名(tab名称),见官网说明(默认name)
* @property {String} count 组件内部读取的list参数中的属性名(badge徽标数),同name属性的使用,见官网说明(默认count)
* @property {Array} offset 设置badge徽标数的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx(默认[5, 20])
* @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
......@@ -108,11 +111,23 @@
type: String,
default: '#ffffff'
},
// 读取传入的数组对象的属性
// 读取传入的数组对象的属性(tab名称)
name: {
type: String,
default: 'name'
},
// 读取传入的数组对象的属性(徽标数)
count: {
type: String,
default: 'count'
},
// 徽标数位置偏移
offset: {
type: Array,
default: () => {
return [5, 20]
}
},
// 活动tab字体是否加粗
bold: {
type: Boolean,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment