wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

细节

Browse Source
main
fanfan 1 year ago
parent 3a4c52f674
commit 0f76dc0da4
2 changed files with 403 additions and 389 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      pages/index/index.vue
  2. 198
      uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue

4
pages/index/index.vue
Unescape View File

@ -2,7 +2,7 @@
<view class="index"> <view class="index">
<view class="navbarContent"> <view class="navbarContent">
<u-navbar :is-back="false" title="" :background="background" :border-bottom="false"> <u-navbar :is-back="false" title="" :background="background" :border-bottom="false">
<image :src="logoImage" mode="heightFix" class="logo"></image> <image v-if="logoImage" :src="logoImage" mode="heightFix" class="logo"></image>
<view class="slot-wrap"> <view class="slot-wrap">
<u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome" <u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome"
:bold="false" button-color="#fff" :list="list" :current="current"></u-subsection> :bold="false" button-color="#fff" :list="list" :current="current"></u-subsection>
@ -1097,7 +1097,7 @@
onLoad() { onLoad() {
this.getTypeList() this.getTypeList()
this.getSeckill() this.getSeckill()
this.getSuggest() this.getSuggest()//根据数据格式需要分页
this.getCityInfo() this.getCityInfo()
this.getCoupons(); this.getCoupons();
this.getServeList(); this.getServeList();

198
uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue
Unescape View File

@ -1,16 +1,29 @@
<template> <template>
<view class="u-subsection" :style="[subsectionStyle]"> <view class="u-subsection" :style="[subsectionStyle]">
<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]" <view
v-for="(item, index) in listInfo" :key="index"> class="u-item u-line-1"
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view> :style="[itemStyle(index)]"
<u-badge v-if="item.num > 0" :count="item.num" :offset="offset" size="mini"></u-badge> @tap="click(index)"
:class="[noBorderRight(index), 'u-item-' + index]"
v-for="(item, index) in listInfo"
:key="index"
>
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{
item.name
}}</view>
<u-badge
v-if="item.num > 0"
:count="item.num"
:offset="offset"
size="mini"
></u-badge>
</view> </view>
<view class="u-item-bg" :style="[itemBarStyle]"></view> <view class="u-item-bg" :style="[itemBarStyle]"></view>
</view> </view>
</template> </template>
<script> <script>
/** /**
* subsection 分段器 * subsection 分段器
* @description 该分段器一般用于用户从几个选项中选择某一个的场景 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
* @tutorial https://www.uviewui.com/components/subsection.html * @tutorial https://www.uviewui.com/components/subsection.html
@ -28,85 +41,85 @@
* @event {Function} change 分段器选项发生改变时触发 * @event {Function} change 分段器选项发生改变时触发
* @example <u-subsection active-color="#ff9900"></u-subsection> * @example <u-subsection active-color="#ff9900"></u-subsection>
*/ */
export default { export default {
name: "u-subsection", name: "u-subsection",
emits: ["change","update:modelValue", "input"], emits: ["change", "update:modelValue", "input"],
props: { props: {
// tab的数据 // tab的数据
list: { list: {
type: Array, type: Array,
default () { default() {
return []; return [];
} },
}, },
value: { value: {
type: [String, Number], type: [String, Number],
default: 0 default: 0,
}, },
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
default: 0 default: 0,
}, },
// 当前活动的tab的index // 当前活动的tab的index
current: { current: {
type: [Number, String], type: [Number, String],
default: 0 default: 0,
}, },
// 激活的颜色 // 激活的颜色
activeColor: { activeColor: {
type: String, type: String,
default: '#303133' default: "#303133",
}, },
// 未激活的颜色 // 未激活的颜色
inactiveColor: { inactiveColor: {
type: String, type: String,
default: '#606266' default: "#606266",
}, },
// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
mode: { mode: {
type: String, type: String,
default: 'button' default: "button",
}, },
// 字体大小，单位rpx // 字体大小，单位rpx
fontSize: { fontSize: {
type: [Number, String], type: [Number, String],
default: 28 default: 28,
}, },
// 是否开启动画效果 // 是否开启动画效果
animation: { animation: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 组件的高度，单位rpx // 组件的高度，单位rpx
height: { height: {
type: [Number, String], type: [Number, String],
default: 70 default: 70,
}, },
// 激活tab的字体是否加粗 // 激活tab的字体是否加粗
bold: { bold: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// mode=button时，组件背景颜色 // mode=button时，组件背景颜色
bgColor: { bgColor: {
type: String, type: String,
default: '#eeeeef' default: "#eeeeef",
}, },
// mode = button时，滑块背景颜色 // mode = button时，滑块背景颜色
buttonColor: { buttonColor: {
type: String, type: String,
default: '#ffffff' default: "#ffffff",
}, },
// 在切换分段器的时候，是否让设备震一下 // 在切换分段器的时候，是否让设备震一下
vibrateShort: { vibrateShort: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
offset: { offset: {
type: Array, type: Array,
default: function(){ default: function () {
return [0,0] return [0, 0];
} },
}, },
}, },
data() { data() {
@ -114,15 +127,15 @@
itemBgStyle: { itemBgStyle: {
width: 0, width: 0,
left: 0, left: 0,
backgroundColor: '#ffffff', backgroundColor: "#ffffff",
height: '100%', height: "100%",
transition: '' transition: "",
}, },
currentIndex: this.current, currentIndex: this.current,
buttonPadding: 3, // mode = button 时，组件的内边距 buttonPadding: 3, // mode = button 时，组件的内边距
borderRadius: 5, // 圆角值 borderRadius: 5, // 圆角值
firstTimeVibrateShort: true ,// 组件初始化时，会触发current变化，此时不应震动 firstTimeVibrateShort: true, // 组件初始化时，会触发current变化，此时不应震动
listInfo:[] listInfo: [],
}; };
}, },
watch: { watch: {
@ -132,7 +145,7 @@
if (!nVal) nVal = 0; if (!nVal) nVal = 0;
this.currentIndex = nVal; this.currentIndex = nVal;
this.changeSectionStatus(nVal); this.changeSectionStatus(nVal);
} },
}, },
current: { current: {
immediate: true, immediate: true,
@ -140,18 +153,17 @@
if (!nVal) nVal = this.valueCom || 0; if (!nVal) nVal = this.valueCom || 0;
this.currentIndex = nVal; this.currentIndex = nVal;
this.changeSectionStatus(nVal); this.changeSectionStatus(nVal);
} },
}, },
list: { list: {
deep:true, deep: true,
handler(nVal=[]) { handler(nVal = []) {
this.listInfoFn(); this.listInfoFn();
setTimeout(() => { setTimeout(() => {
this.getTabsInfo(); this.getTabsInfo();
}, 10); }, 10);
}
}, },
},
}, },
computed: { computed: {
valueCom() { valueCom() {
@ -165,25 +177,25 @@
}, },
// 设置mode=subsection时，滑块特有的样式 // 设置mode=subsection时，滑块特有的样式
noBorderRight() { noBorderRight() {
return index => { return (index) => {
if (this.mode != 'subsection') return; if (this.mode != "subsection") return;
let classs = ''; let classs = "";
// 不显示右边的边框 // 不显示右边的边框
if (index < this.list.length - 1) classs += ' u-none-border-right'; if (index < this.list.length - 1) classs += " u-none-border-right";
// 显示整个组件的左右边圆角 // 显示整个组件的左右边圆角
if (index == 0) classs += ' u-item-first'; if (index == 0) classs += " u-item-first";
if (index == this.list.length - 1) classs += ' u-item-last'; if (index == this.list.length - 1) classs += " u-item-last";
return classs; return classs;
}; };
}, },
// 文字的样式 // 文字的样式
textStyle() { textStyle() {
return index => { return (index) => {
let style = {}; let style = {};
// 设置字体颜色 // 设置字体颜色
if (this.mode == 'subsection') { if (this.mode == "subsection") {
if (index == this.currentIndex) { if (index == this.currentIndex) {
style.color = '#ffffff'; style.color = "#ffffff";
} else { } else {
style.color = this.activeColor; style.color = this.activeColor;
} }
@ -195,21 +207,21 @@
} }
} }
// 字体加粗 // 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'; if (index == this.currentIndex && this.bold) style.fontWeight = "bold";
// 文字大小 // 文字大小
style.fontSize = this.fontSize + 'rpx'; style.fontSize = this.fontSize + "rpx";
return style; return style;
}; };
}, },
// 每个分段器item的样式 // 每个分段器item的样式
itemStyle() { itemStyle() {
return index => { return (index) => {
let style = {}; let style = {};
if (this.mode == 'subsection') { if (this.mode == "subsection") {
// 设置border的样式 // 设置border的样式
style.borderColor = this.activeColor; style.borderColor = this.activeColor;
style.borderWidth = '1px'; style.borderWidth = "1px";
style.borderStyle = 'solid'; style.borderStyle = "solid";
} }
return style; return style;
}; };
@ -217,8 +229,8 @@
// mode=button时，外层view的样式 // mode=button时，外层view的样式
subsectionStyle() { subsectionStyle() {
let style = {}; let style = {};
style.height = uni.upx2px(this.height) + 'px'; style.height = uni.upx2px(this.height) + "px";
if (this.mode == 'button') { if (this.mode == "button") {
style.backgroundColor = this.bgColor; style.backgroundColor = this.bgColor;
style.padding = `${this.buttonPadding}px`; style.padding = `${this.buttonPadding}px`;
style.borderRadius = `${this.borderRadius}px`; style.borderRadius = `${this.borderRadius}px`;
@ -230,15 +242,15 @@
let style = {}; let style = {};
style.backgroundColor = this.activeColor; style.backgroundColor = this.activeColor;
style.zIndex = 1; style.zIndex = 1;
if (this.mode == 'button') { if (this.mode == "button") {
style.backgroundColor = this.buttonColor; style.backgroundColor = this.buttonColor;
style.borderRadius = `${this.borderRadius}px`; style.borderRadius = `${this.borderRadius}px`;
style.bottom = `${this.buttonPadding}px`; style.bottom = `${this.buttonPadding}px`;
style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px'; style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + "px";
style.zIndex = 0; style.zIndex = 0;
} }
return Object.assign(this.itemBgStyle, style); return Object.assign(this.itemBgStyle, style);
} },
}, },
mounted() { mounted() {
this.listInfoFn(); this.listInfoFn();
@ -247,10 +259,10 @@
}, 10); }, 10);
}, },
methods: { methods: {
listInfoFn(){ listInfoFn() {
let { list =[] } = this; let { list = [] } = this;
this.listInfo = this.list.map((val, index) => { this.listInfo = this.list.map((val, index) => {
if (typeof val != 'object') { if (typeof val != "object") {
let obj = { let obj = {
width: 0, width: 0,
name: val, name: val,
@ -264,7 +276,7 @@
}, },
// 改变滑块的样式 // 改变滑块的样式
changeSectionStatus(nVal) { changeSectionStatus(nVal) {
if (this.mode == 'subsection') { if (this.mode == "subsection") {
// 根据滑块在最左边和最右边时，显示左边和右边的圆角 // 根据滑块在最左边和最右边时，显示左边和右边的圆角
if (nVal == this.list.length - 1) { if (nVal == this.list.length - 1) {
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`; this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
@ -273,7 +285,7 @@
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`; this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
} }
if (nVal > 0 && nVal < this.list.length - 1) { if (nVal > 0 && nVal < this.list.length - 1) {
this.itemBgStyle.borderRadius = '0'; this.itemBgStyle.borderRadius = "0";
} }
} }
// 更新滑块的位置 // 更新滑块的位置
@ -294,7 +306,7 @@
if (index == this.currentIndex) return; if (index == this.currentIndex) return;
this.currentIndex = index; this.currentIndex = index;
this.changeSectionStatus(index); this.changeSectionStatus(index);
this.$emit('change', Number(index)); this.$emit("change", Number(index));
this.$emit("input", Number(index)); this.$emit("input", Number(index));
this.$emit("update:modelValue", Number(index)); this.$emit("update:modelValue", Number(index));
}, },
@ -302,9 +314,9 @@
getTabsInfo() { getTabsInfo() {
let view = uni.createSelectorQuery().in(this); let view = uni.createSelectorQuery().in(this);
for (let i = 0; i < this.list.length; i++) { for (let i = 0; i < this.list.length; i++) {
view.select('.u-item-' + i).boundingClientRect(); view.select(".u-item-" + i).boundingClientRect();
} }
view.exec(res => { view.exec((res) => {
if (!res.length) { if (!res.length) {
setTimeout(() => { setTimeout(() => {
this.getTabsInfo(); this.getTabsInfo();
@ -316,10 +328,12 @@
this.listInfo[index].width = val.width; this.listInfo[index].width = val.width;
}); });
// 初始化滑块的宽度 // 初始化滑块的宽度
if (this.mode == 'subsection') { if (this.listInfo) {
this.itemBgStyle.width = this.listInfo[0].width + 'px'; if (this.mode == "subsection") {
} else if (this.mode == 'button') { this.itemBgStyle.width = this.listInfo[0].width + "px";
this.itemBgStyle.width = this.listInfo[0].width + 'px'; } else if (this.mode == "button") {
this.itemBgStyle.width = this.listInfo[0].width + "px";
}
} }
// 初始化滑块的位置 // 初始化滑块的位置
this.itemBgLeft(); this.itemBgLeft();
@ -328,9 +342,9 @@
itemBgLeft() { itemBgLeft() {
// 根据是否开启动画效果， // 根据是否开启动画效果，
if (this.animation) { if (this.animation) {
this.itemBgStyle.transition = 'all 0.35s'; this.itemBgStyle.transition = "all 0.35s";
} else { } else {
this.itemBgStyle.transition = 'all 0s'; this.itemBgStyle.transition = "all 0s";
} }
let left = 0; let left = 0;
// 计算当前活跃item到组件左边的距离 // 计算当前活跃item到组件左边的距离
@ -338,27 +352,27 @@
if (index < this.currentIndex) left += val.width; if (index < this.currentIndex) left += val.width;
}); });
// 根据mode不同模式，计算滑块需要移动的距离 // 根据mode不同模式，计算滑块需要移动的距离
if (this.mode == 'subsection') { if (this.mode == "subsection") {
this.itemBgStyle.left = left + 'px'; this.itemBgStyle.left = left + "px";
} else if (this.mode == 'button') { } else if (this.mode == "button") {
this.itemBgStyle.left = left + this.buttonPadding + 'px'; this.itemBgStyle.left = left + this.buttonPadding + "px";
}
} }
} },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-subsection { .u-subsection {
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.u-item { .u-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
@ -369,34 +383,34 @@
color: $u-main-color; color: $u-main-color;
padding: 0 6rpx; padding: 0 6rpx;
position: relative; position: relative;
} }
.u-item-bg { .u-item-bg {
background-color: $u-type-primary; background-color: $u-type-primary;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.u-none-border-right { .u-none-border-right {
border-right: none !important; border-right: none !important;
} }
.u-item-first { .u-item-first {
border-top-left-radius: 8rpx; border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx; border-bottom-left-radius: 8rpx;
} }
.u-item-last { .u-item-last {
border-top-right-radius: 8rpx; border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx; border-bottom-right-radius: 8rpx;
} }
.u-item-text { .u-item-text {
transition: all 0.35s; transition: all 0.35s;
color: $u-main-color; color: $u-main-color;
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save