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

细节

Browse Source
main
fanfan 8 months 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="navbarContent">
<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">
<u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome"
:bold="false" button-color="#fff" :list="list" :current="current"></u-subsection>
@ -1097,7 +1097,7 @@
onLoad() {
this.getTypeList()
this.getSeckill()
this.getSuggest()
this.getSuggest()//根据数据格式需要分页
this.getCityInfo()
this.getCoupons();
this.getServeList();

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

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

Write Preview
Loading…
Cancel
Save