快应用自定义进度条

最新推荐文章于 2023-02-27 11:44:02 发布

Mr_Tony

最新推荐文章于 2023-02-27 11:44:02 发布

阅读量297

点赞数

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/mr_tony/article/details/126001444

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

一、前言

早快应用框架中虽然有进度条，但是不能设置高度和滑块的背景图。所以这里需要进行自定义，由于没有做封装处理，后续需求变动需要更改源码。实现的效果如下，该进度条的最大值为14，最小值为0。每次前进长度为1，滑动为平滑滑动:

在这里插入图片描述

二、相关代码

<!-- 这是一个自定义的滑动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>

使用方式

<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>