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. 788
      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();

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

@ -1,402 +1,416 @@
<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)"
</view> :class="[noBorderRight(index), 'u-item-' + index]"
<view class="u-item-bg" :style="[itemBarStyle]"></view> v-for="(item, index) in listInfo"
</view> :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> </template>
<script> <script>
/** /**
* subsection 分段器 * subsection 分段器
* @description 该分段器一般用于用户从几个选项中选择某一个的场景 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
* @tutorial https://www.uviewui.com/components/subsection.html * @tutorial https://www.uviewui.com/components/subsection.html
* @property {Array} list 选项的数组，形式见上方"基本使用" * @property {Array} list 选项的数组，形式见上方"基本使用"
* @property {String Number} current 初始化时默认选中的选项索引值（默认0） * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
* @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133） * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266） * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button） * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
* @property {String Number} font-size 字体大小，单位rpx（默认28） * @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {String Number} height 组件高度，单位rpx（默认70） * @property {String Number} height 组件高度，单位rpx（默认70）
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true） * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef） * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
* @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff） * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
* @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() {
return { return {
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: {
valueCom: { valueCom: {
immediate: true, immediate: true,
handler(nVal) { handler(nVal) {
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,
handler(nVal) { handler(nVal) {
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() { // #ifndef VUE3
// #ifndef VUE3 return this.value;
return this.value; // #endif
// #endif
// #ifdef VUE3
// #ifdef VUE3 return this.modelValue;
return this.modelValue; // #endif
// #endif },
}, // 设置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; }
} } else {
} else { if (index == this.currentIndex) {
if (index == this.currentIndex) { style.color = this.activeColor;
style.color = this.activeColor; } else {
} else { style.color = this.inactiveColor;
style.color = this.inactiveColor; }
} }
} // 字体加粗
// 字体加粗 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; };
}; },
}, // 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`; }
} return style;
return style; },
}, // 滑块的样式
// 滑块的样式 itemBarStyle() {
itemBarStyle() { 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(); setTimeout(() => {
setTimeout(() => { this.getTabsInfo();
this.getTabsInfo(); }, 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, };
}; return obj;
return obj; } else {
} else { return val;
return val; }
} });
}); return this.listInfo;
return this.listInfo; },
}, // 改变滑块的样式
// 改变滑块的样式 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`; }
} if (nVal == 0) {
if (nVal == 0) { 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'; }
} }
} // 更新滑块的位置
// 更新滑块的位置 setTimeout(() => {
setTimeout(() => { this.itemBgLeft();
this.itemBgLeft(); }, 10);
}, 10); if (this.vibrateShort && !this.firstTimeVibrateShort) {
if (this.vibrateShort && !this.firstTimeVibrateShort) { // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效 // #ifndef H5
// #ifndef H5 uni.vibrateShort();
uni.vibrateShort(); // #endif
// #endif }
} // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话) this.firstTimeVibrateShort = false;
this.firstTimeVibrateShort = false; },
}, click(index) {
click(index) { // 不允许点击当前激活选项
// 不允许点击当前激活选项 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)); },
}, // 获取各个tab的节点信息
// 获取各个tab的节点信息 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(); return;
return; }, 10);
}, 10); }
} // 将分段器每个item的宽度，放入listInfo数组
// 将分段器每个item的宽度，放入listInfo数组 res.map((val, index) => {
res.map((val, index) => { this.listInfo[index].width = val.width;
this.listInfo[index].width = val.width; });
}); // 初始化滑块的宽度
// 初始化滑块的宽度 if (this.listInfo) {
if (this.mode == 'subsection') { if (this.mode == "subsection") {
this.itemBgStyle.width = this.listInfo[0].width + 'px'; this.itemBgStyle.width = this.listInfo[0].width + "px";
} else if (this.mode == 'button') { } else if (this.mode == "button") {
this.itemBgStyle.width = this.listInfo[0].width + 'px'; this.itemBgStyle.width = this.listInfo[0].width + "px";
} }
// 初始化滑块的位置 }
this.itemBgLeft(); // 初始化滑块的位置
}); this.itemBgLeft();
}, });
itemBgLeft() { },
// 根据是否开启动画效果， itemBgLeft() {
if (this.animation) { // 根据是否开启动画效果，
this.itemBgStyle.transition = 'all 0.35s'; if (this.animation) {
} else { this.itemBgStyle.transition = "all 0.35s";
this.itemBgStyle.transition = 'all 0s'; } else {
} this.itemBgStyle.transition = "all 0s";
let left = 0; }
// 计算当前活跃item到组件左边的距离 let left = 0;
this.listInfo.map((val, index) => { // 计算当前活跃item到组件左边的距离
if (index < this.currentIndex) left += val.width; this.listInfo.map((val, index) => {
}); if (index < this.currentIndex) left += val.width;
// 根据mode不同模式，计算滑块需要移动的距离 });
if (this.mode == 'subsection') { // 根据mode不同模式，计算滑块需要移动的距离
this.itemBgStyle.left = left + 'px'; if (this.mode == "subsection") {
} else if (this.mode == 'button') { this.itemBgStyle.left = left + "px";
this.itemBgStyle.left = left + this.buttonPadding + 'px'; } else if (this.mode == "button") {
} 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;
height: 100%; height: 100%;
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
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