I. Introduction
Although there is a progress bar in the early application framework, the height and the background image of the slider cannot be set. Therefore, customization is required here. Since there is no encapsulation process, the source code needs to be changed for subsequent changes in requirements. The achieved effect is as follows, the maximum value of the progress bar is 14, and the minimum value is 0. The length of each advance is 1, and the sliding is smooth sliding:
2. Related codes
<!-- 这是一个自定义的滑动Slider -->
<template>
<div class="wrapper" id="slider-root" @touchStart="touchHandlerRootStart">
<stack class="slider-container"
><!--层叠布局，底部是滑动条，顶部是滑块-->
<div class="slider-bg">
<div class="slider-progress" style="{
{
sliderProgressStyle()}}"></div>
</div>
<div @touchStart="touchHandlerStart" @touchMove="touchHandlerMove" class="slider-block" style="{
{
handlerStyle()}}"></div>
</stack>
</div>
</template>
<script>
const blockOffset = 40 //滑块点击时候的偏移值，该值为滑块的宽度
const halfBlock = blockOffset / 2 //一半的滑块宽度
const maxWidth = 600//该值为进度条的宽度, 由于组件 暂时无法在显示时候获取背景宽度，所以该值不能自适应，只能写固定值
const minWidth = 0
const total = 15 //总进度为15 , 因为从0开始，所以这里为14
const stepWidth = maxWidth / total //每一份的宽度
let lastEmitProcess = -1; //上一次发送的进度
export default {
data: {
title: "Hello World. Quickapp Component.",
percent: "0"
},
props: [],
onInit() {
},
onShow() {
},
sliderProgressStyle(){
let baseStyle = {
width: this.percent + 'px'
}
return baseStyle;
},
handlerStyle() {
let blockX = this.percent - halfBlock
if(blockX < 0){
blockX = 0
}
if(blockX > maxWidth - halfBlock){
blockX = maxWidth - halfBlock
}
// console.log("YM--->滑动的进度-blockX", blockX)
let baseStyle = {
marginLeft: blockX + 'px'
}
return baseStyle;
},
touchHandlerStart(event){
// console.log("YM-->touchHandlerStart", event, stepWidth)
},
touchHandlerMove(event){
let touchFirstElement = event.touches[0] //第一个触摸事件
let clientX = Math.floor(touchFirstElement.clientX) //当前的距离
let tempPercent = clientX - 62
if(tempPercent >= maxWidth - 16){
tempPercent = maxWidth - 16
}
if(tempPercent <= minWidth){
tempPercent = minWidth
}
// console.log("YM-->touchHandlerMove", event, clientX)
// this.fixTouchEvent(tempPercent)
this.percent = tempPercent
let realPercent = Math.floor(tempPercent / stepWidth)
if(lastEmitProcess != realPercent){
lastEmitProcess = realPercent
this.$emit('onChange', lastEmitProcess)
}
},
}
</script>
<style lang="less">
.wrapper {
width: 100%;
height: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: #212121;
}
.slider-container {
display: flex;
align-items: center;
.slider-bg {
height: 8px;
width: 300px;
background-color: #fff;
border-radius: 4px;
.slider-progress {
background-color: #4a6aff;
width: 100px;
height: 8px;
border-radius: 4px ;
}
}
.slider-block {
height: 18px;
width: 18px;
margin-left: 300px;
background-color: #4A6AFF;
border: 2px solid #FFFFFF;
border-radius: 9px ;
}
}
</style>
How to use
<import name="ym-slider" src="../ym-slider/index.ux"></import>
<ym-slider @on-change="onChangeProgress"></ym-slider>
<script>
export default {
onChangeProgress(e) {
let tempProgress = e.detail
console.log("当前进度:",tempProgress)
},
}
</script>