提交
This commit is contained in:
63
components/battery.vue
Normal file
63
components/battery.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="battery-container">
|
||||
<view class="battery-body"><view class="battery" :style="{ width: `${level}%` }"></view></view>
|
||||
<view class="battery-head"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
charging: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.battery-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
.battery-body {
|
||||
position: relative;
|
||||
padding: 1px;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
border: $minor-text-color solid 1px;
|
||||
.battery {
|
||||
height: 100%;
|
||||
background-color: $minor-text-color;
|
||||
}
|
||||
.charging {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.battery-head {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background-color: $minor-text-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
components/myProgress.vue
Normal file
121
components/myProgress.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="progress-container">
|
||||
<view class="progress-container2" id="progress" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
|
||||
<view class="progress-box"><progress :percent="percent" activeColor="#000" backgroundColor="#1c1c1c" stroke-width="3" /></view>
|
||||
<view class="ball-box" :class="{ bigger: isTouch, shadow: isTouch }" :style="{ left: `${percent}%` }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
total: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
left: 0, //进度条最左侧位置
|
||||
right: 0, //进度条最右侧位置
|
||||
isTouch: false,
|
||||
// touchTimer: null, //用于触摸节流
|
||||
percent: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
index() {
|
||||
this.percent = (this.index / this.total) * 100;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.percent = (this.index / this.total) * 100;
|
||||
this.getLocation();
|
||||
},
|
||||
methods: {
|
||||
getLocation() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('#progress')
|
||||
.boundingClientRect(data => {
|
||||
this.left = data.left;
|
||||
this.right = data.right;
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
|
||||
touchstart() {
|
||||
this.isTouch = true;
|
||||
this.$emit('progressStart');
|
||||
},
|
||||
|
||||
touchend(e) {
|
||||
this.isTouch = false;
|
||||
let index = this.calcIndex(e.changedTouches[0].clientX);
|
||||
this.$emit('progressEnd', index);
|
||||
this.percent = (index / this.total) * 100;
|
||||
},
|
||||
|
||||
touchmove(e) {
|
||||
// if (!this.touchTimer) {
|
||||
let index = this.calcIndex(e.touches[0].clientX);
|
||||
this.$emit('indexChange', index);
|
||||
this.percent = (index / this.total) * 100;
|
||||
// this.touchTimer = setTimeout(() => {
|
||||
// this.touchTimer = null;
|
||||
// }, 100)
|
||||
// }
|
||||
},
|
||||
|
||||
/**
|
||||
* 输入位置计算index
|
||||
**/
|
||||
calcIndex(px) {
|
||||
let single = (this.right - this.left) / this.total;
|
||||
let index = Math.round((px - this.left) / single);
|
||||
index = index < 0 ? 0 : index;
|
||||
index = index > this.total ? this.total : index;
|
||||
return index;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-container {
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.progress-container2 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.progress-box {
|
||||
width: 100%;
|
||||
}
|
||||
.ball-box {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.shadow {
|
||||
box-shadow: 0px 0px 1px 5px rgba(#888, 0.4);
|
||||
}
|
||||
.bigger {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
components/virtualList.vue
Normal file
135
components/virtualList.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<view class="virtual-list" style="position: relative;">
|
||||
<movable-area style="position: absolute;right: 0;width: 30px;height: 100%;">
|
||||
<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
|
||||
<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
|
||||
<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
:style="{
|
||||
height: scrollHeight + 'px',
|
||||
position: 'relative',
|
||||
zIndex: 1
|
||||
}"
|
||||
@scroll="handleScroll"
|
||||
:scroll-top="scrollTop"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view
|
||||
class="scroll-bar"
|
||||
:style="{
|
||||
height: localHeight + 'px'
|
||||
}"
|
||||
></view>
|
||||
<view
|
||||
class="list"
|
||||
:style="{
|
||||
transform: `translateY(${offset}px)`
|
||||
}"
|
||||
>
|
||||
<view class="item-wrap" v-for="(item, index) in visibleData" :key="index"><slot :item="item" :active="active"></slot></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VirtualList',
|
||||
props: {
|
||||
// 所有的items
|
||||
items: Array,
|
||||
// 可视区域的item数量
|
||||
remain: Number,
|
||||
// item大小
|
||||
size: Number,
|
||||
// 当前章节
|
||||
active: Number,
|
||||
// 可使区域高度
|
||||
scrollHeight: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 起始
|
||||
start: 0,
|
||||
// 结束
|
||||
end: this.remain,
|
||||
// list 偏移量
|
||||
offset: 0,
|
||||
scrollTop: 0,
|
||||
y: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//当前章节滚动至顶部
|
||||
this.scrollTop = this.size * this.active;
|
||||
},
|
||||
computed: {
|
||||
// 预留项
|
||||
preCount() {
|
||||
return Math.min(this.start, this.remain);
|
||||
},
|
||||
nextCount() {
|
||||
return Math.min(this.items.length - this.end, this.remain);
|
||||
},
|
||||
// 可视区域的item
|
||||
visibleData() {
|
||||
const start = this.start - this.preCount;
|
||||
const end = this.end + this.nextCount;
|
||||
return this.items.slice(start, end);
|
||||
},
|
||||
localHeight() {
|
||||
return this.items.length * this.size;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
if (e.detail.source !== 'touch') {
|
||||
return;
|
||||
}
|
||||
let y = e.detail.y;
|
||||
let scroll = (y / (this.scrollHeight - 40)) * (this.localHeight - this.scrollHeight);
|
||||
scroll = scroll < 0 ? 0 : scroll;
|
||||
this.scrollTop = scroll;
|
||||
},
|
||||
handleScroll(ev) {
|
||||
const scrollTop = ev.detail.scrollTop;
|
||||
this.y = (scrollTop / (this.localHeight - this.scrollHeight)) * (this.scrollHeight - 40);
|
||||
// 开始位置
|
||||
const start = Math.floor(scrollTop / this.size);
|
||||
this.start = start < 0 ? 0 : start;
|
||||
// 结束位置
|
||||
this.end = this.start + this.remain;
|
||||
// 计算偏移
|
||||
const offset = scrollTop - (scrollTop % this.size) - this.preCount * this.size;
|
||||
this.offset = offset < 0 ? 0 : offset;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.action-bar-box {
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 0 5px #000;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user