Quick apply custom progress bar

One 、 Preface

Although there is a progress bar in the early application framework , But you can't set the height and the background image of the slider . So here you need to customize , Because there is no encapsulation , Subsequent demand changes require changing the source code . The effect is as follows , The maximum value of this progress bar is 14, The minimum value is 0. The length of each advance is 1, Sliding is smooth :

Two 、 Related codes

<!--  This is a custom slide Slider -->

<template>
  <div class="wrapper" id="slider-root" @touchStart="touchHandlerRootStart">
    <stack class="slider-container" ><!-- Lay out in layers , At the bottom is a sliding bar , The top is the slider -->
      <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 // The offset value when the slider is clicked , This value is the width of the slider  const halfBlock = blockOffset / 2 // Half the slider width  const maxWidth = 600// This value is the width of the progress bar ,  Due to component   Temporarily unable to obtain the background width when displaying , Therefore, this value cannot be adaptive , Only fixed values can be written  const minWidth = 0 const total = 15 // The overall progress is 15 ,  Because from 0 Start , So here is 14 const stepWidth = maxWidth / total // The width of each portion  let lastEmitProcess = -1; // Last sent progress  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---> Sliding progress -blockX", blockX) let baseStyle = {
       marginLeft: blockX + 'px' } return baseStyle; }, touchHandlerStart(event){
       // console.log("YM-->touchHandlerStart", event, stepWidth) }, touchHandlerMove(event){
       let touchFirstElement = event.touches[0] // The first touch event  let clientX = Math.floor(touchFirstElement.clientX) // Current distance  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>

Usage mode

<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(" Current progress :",tempProgress) }, } </script>