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框架,全 ...@@ -19,7 +19,7 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
## [官方文档:https://www.uviewui.com](https://www.uviewui.com) ## [官方文档: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)
## 特性 ## 特性
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-toast ref="uToast"></u-toast> <u-toast ref="uToast"></u-toast>
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list" <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> </view>
<view class="u-config-wrap"> <view class="u-config-wrap">
...@@ -38,9 +38,11 @@ ...@@ -38,9 +38,11 @@
return { return {
list: [], list: [],
data: [{ data: [{
name: '关注' name: '关注',
count: 100
}, { }, {
name: '推荐' name: '推荐',
count: 7
}, { }, {
name: '电影' name: '电影'
},{ },{
...@@ -62,7 +64,8 @@ ...@@ -62,7 +64,8 @@
tabCountIndex: 0, tabCountIndex: 0,
activeColor: this.$u.color['primary'], activeColor: this.$u.color['primary'],
bold: true, bold: true,
control: true control: true,
offset: [5, -5]
} }
}, },
onLoad() { onLoad() {
...@@ -75,17 +78,20 @@ ...@@ -75,17 +78,20 @@
this.list = []; this.list = [];
this.list.push(this.data[0]); this.list.push(this.data[0]);
this.list.push(this.data[1]); this.list.push(this.data[1]);
this.offset = [5, 60]
} else if(index == 1) { } else if(index == 1) {
this.list = []; this.list = [];
this.list.push(this.data[0]); this.list.push(this.data[0]);
this.list.push(this.data[1]); this.list.push(this.data[1]);
this.list.push(this.data[2]); this.list.push(this.data[2]);
this.offset = [5, 20]
} else { } else {
this.list = []; this.list = [];
this.list.push(this.data[0]); this.list.push(this.data[0]);
this.list.push(this.data[1]); this.list.push(this.data[1]);
this.list.push(this.data[2]); this.list.push(this.data[2]);
this.list.push(this.data[3]); this.list.push(this.data[3]);
this.offset = [5, 5]
} }
this.tabCountIndex = index; this.tabCountIndex = index;
this.isScroll = false; this.isScroll = false;
...@@ -99,6 +105,7 @@ ...@@ -99,6 +105,7 @@
if(index == 0) { if(index == 0) {
this.isScroll = true; this.isScroll = true;
this.list = this.data; this.list = this.data;
this.offset = [5, -5]
} else { } else {
this.isScroll = false; this.isScroll = false;
this.countChange(this.tabCountIndex); this.countChange(this.tabCountIndex);
...@@ -135,6 +142,6 @@ ...@@ -135,6 +142,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.u-config-wrap { .u-config-wrap {
} }
</style> </style>
...@@ -278,7 +278,8 @@ export default { ...@@ -278,7 +278,8 @@ export default {
name: '待收货' name: '待收货'
}, },
{ {
name: '待评价' name: '待评价',
count: 12
} }
], ],
current: 0, current: 0,
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
:custom-prefix="customPrefix" :custom-prefix="customPrefix"
:show-decimal-icon="showDecimalIcon(index)" :show-decimal-icon="showDecimalIcon(index)"
:percent="decimal" :percent="decimal"
:inactiveColor="inactiveColor" :inactive-color="inactiveColor"
></u-icon> ></u-icon>
</view> </view>
</view> </view>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<view class="u-tabs-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}"> <view class="u-tabs-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class="u-tabs-item" :style="[tabItemStyle(index)]" <view class="u-tabs-item" :style="[tabItemStyle(index)]"
v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emit(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']}} {{ item[name] || item['name']}}
</view> </view>
<view v-if="showBar" class="u-scroll-bar" :style="[tabBarStyle]"></view> <view v-if="showBar" class="u-scroll-bar" :style="[tabBarStyle]"></view>
...@@ -18,9 +19,7 @@ ...@@ -18,9 +19,7 @@
<script> <script>
import colorGradient from '../../libs/function/colorGradient'; import colorGradient from '../../libs/function/colorGradient';
let color = colorGradient; let color = colorGradient;
const { const { windowWidth } = uni.getSystemInfoSync();
windowWidth
} = uni.getSystemInfoSync();
const preId = 'UEl_'; const preId = 'UEl_';
/** /**
...@@ -43,6 +42,8 @@ ...@@ -43,6 +42,8 @@
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40) * @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff) * @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name) * @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) * @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发 * @event {Function} change 点击标签时触发
* @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper> * @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
...@@ -127,11 +128,23 @@ ...@@ -127,11 +128,23 @@
type: String, type: String,
default: 'window' default: 'window'
}, },
// 读取传入的数组对象的属性 // 读取传入的数组对象的属性(tab名称)
name: { name: {
type: String, type: String,
default: 'name' default: 'name'
}, },
// 读取传入的数组对象的属性(徽标数)
count: {
type: String,
default: 'count'
},
// 徽标数位置偏移
offset: {
type: Array,
default: () => {
return [5, 20]
}
},
// 活动tab字体是否加粗 // 活动tab字体是否加粗
bold: { bold: {
type: Boolean, type: Boolean,
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}"> <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)" <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)]"> :style="[tabItemStyle(index)]">
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
{{ item[name] || item['name']}} {{ item[name] || item['name']}}
</view> </view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view> <view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
...@@ -20,7 +21,7 @@ ...@@ -20,7 +21,7 @@
<script> <script>
/** /**
* tabs 标签 * tabs 标签
* @description 该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 * @description 该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。
* @tutorial https://www.uviewui.com/components/tabs.html * @tutorial https://www.uviewui.com/components/tabs.html
* @property {Boolean} is-scroll tabs是否可以左右拖动(默认true) * @property {Boolean} is-scroll tabs是否可以左右拖动(默认true)
* @property {Array} list 标签数组,元素为对象,如[{name: '推荐'}] * @property {Array} list 标签数组,元素为对象,如[{name: '推荐'}]
...@@ -38,7 +39,9 @@ ...@@ -38,7 +39,9 @@
* @property {String Number} item-width 标签的宽度(默认auto) * @property {String Number} item-width 标签的宽度(默认auto)
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40) * @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff) * @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) * @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发 * @event {Function} change 点击标签时触发
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs> * @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
...@@ -108,11 +111,23 @@ ...@@ -108,11 +111,23 @@
type: String, type: String,
default: '#ffffff' default: '#ffffff'
}, },
// 读取传入的数组对象的属性 // 读取传入的数组对象的属性(tab名称)
name: { name: {
type: String, type: String,
default: 'name' default: 'name'
}, },
// 读取传入的数组对象的属性(徽标数)
count: {
type: String,
default: 'count'
},
// 徽标数位置偏移
offset: {
type: Array,
default: () => {
return [5, 20]
}
},
// 活动tab字体是否加粗 // 活动tab字体是否加粗
bold: { bold: {
type: Boolean, type: Boolean,
...@@ -290,7 +305,7 @@ ...@@ -290,7 +305,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
view, view,
scroll-view { scroll-view {
box-sizing: border-box; box-sizing: border-box;
......
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