[Uni-app] 微信小程序的圆环进度条

这篇具有很好参考价值的文章主要介绍了[Uni-app] 微信小程序的圆环进度条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

微信小程序环形进度条,IT_前端开发_Uniapp,IT_前端开发_Web,IT_百科,uni-app,微信小程序,前端,hbuilderX

组件完整代码如下:

<template>
  <view class="base-style"
    :style="'position: relative;width: ' + diameter + 'px;height: ' + diameter + 'px;display: flex;flex-direction: row;background-color: ' + bgColor + ';'">
    <!-- 左半圆和右半圆都要经历下面的5步:
    [第1步]第1层限定区域; 
    [第2步]第2层决定显示一个整圆的左半边还是右半边; 
    [第3步]第3层先使用激活颜色绘制一个圆环, 再添加一个同级且宽度为区域一半的盒子A;
    [第4步]在盒子A中再使用圆环底色绘制一个圆环, 此时整个圆环是 '左一半是激活颜色、右一半是圆环底色', 但这个圆环同时只能被看到一半;
    [第5步]旋转第2层。 -->

    <!-- 左半圆 -->
    <view class="base-style" :style="firstLayerViewStyle">
      <view :style="secondLayerViewStyle + secondLayerForLeft">
        <!-- 使用激活颜色绘制一个圆环。 -->
        <view :style="thirdLayerStyle">
        </view>
        <!-- 再使用背景色遮盖同级圆环的一半。 -->
        <view class="base-style" :style="thirdLayerStyleForBg">
          <view :style="fourthLayerStyleForBg" />
        </view>
        <view v-if="0 < ePercent && ePercent < 0.5" :style="endPointStyle + endPointStyleForLeft" />
      </view>
    </view>

    <!-- 右半圆 -->
    <view class="base-style" :style="firstLayerViewStyle">
      <!-- 适配:为了避免右侧遮盖显示不全 此处向左多移动了1px -->
      <view :style="secondLayerViewStyle + 'left: ' + (- diameter / 2 - 1) + 'px;' + secondLayerForRight">
        <!-- 使用激活颜色绘制一个圆环。 -->
        <view :style="thirdLayerStyle">
        </view>
        <!-- 再使用背景色遮盖同级圆环的一半。 -->
        <view class="base-style" :style="thirdLayerStyleForBg">
          <view :style="fourthLayerStyleForBg" />
        </view>
        <view v-if="ePercent > 0.5" :style="endPointStyle + endPointStyleForRight" />
      </view>
    </view>

    <view v-if="0.5 == ePercent" :style="endPointStyle + 'background-color: ' + this.hoopBgColor + ';'" />
    <!-- #ifdef APP-PLUS -->
    <!-- 处理现象: 安卓App的顶部和底部会有一个小白点。 -->
    <!-- <view v-if="ePercent > 0.5" :style="'position: absolute;top: 0;' + repairPointStyle" /> -->
    <!-- <view v-if="1.0 == ePercent" :style="'position: absolute;bottom: 0;' + repairPointStyle" /> -->
    <!-- #endif -->
  </view>
</template>

<!-- 组件名称: 圆环进度条。
     启发地址: https://www.cnblogs.com/jr1993/p/4677921.html 。
     编者信息: 867003077@qq.com 。 -->
<script>
  export default {
    name: 'progressCircle',
    props: {
      // 背景色(不宜设置为透明 否则 需要 在 左thirdLayer 的外面 再嵌套一个盒子)。
      bgColor: {
        type: String,
        default: '#FFFFFF'
      },
      // 圆环的外直径(单位px)。
      diameter: {
        type: Number,
        default: 250
      },
      // 圆环线条的厚度(单位px)。
      hoopThickness: {
        type: Number,
        default: 8
      },
      // 圆环底色(灰色的圆环)。
      hoopBgColor: {
        type: String,
        // default: 'transparent'
        default: '#F3F3F3'
      },
      // 圆环激活部分的颜色。
      hoopColor: {
        type: String,
        default: '#FF4C20'
      },
      // 圆环进度百分比值(其值范围在0到1之间)。
      percent: {
        type: [Number, String],
        default: 0,
        validator: val => {
          return val >= 0 && val <= 1;
        },
      },
      animate: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        targetPercent: 0,
        ePercent: 0,
        showTimer: undefined,
      };
    },
    watch: {
      percent: {
        handler: function() {
          console.log('progressCircle_watch_percent', this.percent);
          this.loadData();
        },
      },
    },
    computed: {
      firstLayerViewStyle() {
        return 'position: relative;width: ' + (this.diameter / 2) +
          'px;height: ' + this.diameter + 'px;';
      },
      secondLayerViewStyle() {
        return 'box-sizing: border-box;position: absolute;top: 0;width: ' + this.diameter +
          'px;height: ' + this.diameter + 'px;';
      },
      thirdLayerStyle() {
        return 'box-sizing: border-box;width: ' + this.diameter + 'px;height: ' + this.diameter +
          'px;border-radius: ' + (this.diameter / 2) +
          'px;border-width: ' + this.hoopThickness +
          'px;border-style: solid;border-color: ' + this.hoopColor + ';';
      },
      thirdLayerStyleForBg() {
        return 'box-sizing: border-box;position: absolute;top: 0;left: ' + (this.diameter / 2) + 'px;width: ' +
          this.diameter + 'px;height: ' + this.diameter + 'px;background-color: ' + this.bgColor + ';';
      },
      fourthLayerStyleForBg() {
        return 'box-sizing: border-box;margin-left: ' + (-this.diameter / 2) + 'px;width: ' + this.diameter +
          'px;height: ' +
          this.diameter + 'px;border-radius: ' + (this.diameter / 2) + 'px;border-width: ' +
          this.hoopThickness + 'px;border-style: solid;border-color: ' + this.hoopBgColor + ';';
      },
      secondLayerForLeft() {
        let angle = 0;
        if (this.ePercent < 0.5) {
          angle += (180 * (this.ePercent - 0.5) / 0.5);
        }
        // #ifdef APP-PLUS
        return 'left: 0;transform: rotate(' + angle + 'deg);';
        // #endif
        // #ifndef APP-PLUS
        return 'left: 0;transform: rotate(' + angle + 'deg);-webkit-transform: rotate(' + angle + 'deg);';
        // #endif
      },
      secondLayerForRight() {
        let angle = 0;
        if (this.ePercent > 0.5) {
          angle += (180 * (this.ePercent - 0.5) / 0.5);
        }
        // #ifdef APP-PLUS
        return 'right: 0;transform: rotate(' + angle + 'deg);';
        // #endif
        // #ifndef APP-PLUS
        return 'right: 0;transform: rotate(' + angle + 'deg);-webkit-transform: rotate(' + angle + 'deg);';
        // #endif
      },
      // repairPointStyle() {
      // 	return 'left: ' + (this.diameter - this.hoopThickness) / 2 + 'px;width: ' +
      // 		this.hoopThickness + 'px;height: ' + this.hoopThickness + 'px;border-radius: ' +
      // 		this.hoopThickness / 2 + 'px;background-color: ' + this.hoopColor + ';';
      // },
      endPointStyle() {
        // 结束点圆心圈直径。
        const _circleCenterRadius = 2;
        return 'box-sizing: border-box;position: absolute;top: 0;left: ' + (this.diameter - this.hoopThickness) / 2 +
          'px;width: ' +
          this.hoopThickness + 'px;height: ' + this.hoopThickness + 'px;border-radius: ' + (this.hoopThickness / 2) +
          'px;border-width: ' + (this.hoopThickness / 2 - _circleCenterRadius) +
          'px;border-style: solid;border-color: ' +
          this.hoopColor + ';';
      },
      endPointStyleForLeft() {
        return 'background-color: ' + ((this.ePercent > 0.5) ? this.hoopColor : this.hoopBgColor) + ';';
      },
      endPointStyleForRight() {
        return 'background-color: ' + ((1 == this.ePercent) ? this.hoopColor : this.hoopBgColor) + ';';
      },
    },
    mounted() {
      console.log('progressCircle_mounted');
      this.loadData();
    },
    methods: {
      loadData() {
        this.targetPercent = parseFloat(this.percent);
        console.log('progressCircle_loadData');
        if (!this.animate) {
          this.ePercent = this.targetPercent;
        } else {
          let _this = this;
          this.ePercent = 0;
          this.showTimer && clearInterval(this.showTimer);
          this.showTimer = setInterval(() => {
            let tempPercent = _this.ePercent + 0.1;
            if (tempPercent < _this.targetPercent) {
              _this.ePercent = tempPercent;
              return;
            };
            _this.ePercent = _this.targetPercent;
            clearInterval(_this.showTimer);
          }, 200);
        }
      }
    }
  }
</script>

<style scoped>
  .base-style {
    box-sizing: border-box;
    /* 溢出隐藏 */
    overflow: hidden;
  }
</style>

调用页面:文章来源地址https://www.toymoban.com/news/detail-861659.html

<template>
  <view class="my-page-container" :style="{ 'height': pageBoxH + 'px' }" @click="currentPercent=0.8">
    <progress-circle class="mine-member-level-progress" :diameter="180" :hoopThickness="10" :hoopColor="'orange'"
      :percent="currentPercent" :animate="true" />
  </view>
</template>

<script>
  /** 演示页面 */
  import progressCircle from "@/components/progress-circle/index.vue";
  // import {
  //   queryDetail,
  // } from '@/api/mine.js';
  export default {
    name: 'myDemo',
    components: {
      progressCircle,
    },
    data() {
      return {
        pageBoxH: 1000,
        currentPercent: 0.25,
      };
    },
    beforeCreate() {
      console.log('beforeCreate enter');
    },
    created() {
      console.log('created enter');
    },
    mounted() {
      console.log('mounted enter');
    },
    onLoad(option) {
      console.log('onLoad enter');
    },
    onReady() {},
    methods: {},
  }
</script>

<style scoped>
  .my-page-container {
    background-color: white;
    box-sizing: border-box;
    padding: 10px 10px 50px 10px;
    display: flex;
    flex-direction: column;
  }
</style>

到了这里,关于[Uni-app] 微信小程序的圆环进度条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(18)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(19)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(14)
  • uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(19)
  • [uni-app] 微信小程序 如何修改替换头像

     如下图所示,微信小程序中涉及到修改头像的交互 技术: 前端应用框架为uni-app UI框架为uView  思考: 1. 头像点击事件 click 2.从本地相册选择图片或使用相机拍照 uni.chooseImage(OBJECT) ,方法执行成功后根据success中返回的图片的本地文件路径列表 tempFilePaths,做操作 3.上传图片

    2024年02月11日
    浏览(19)
  • 微信小程序修改原生组件样式(uni-app)

    微信小程序修改原生组件样式 全局修改,直接将修改的样式写在全局的样式文件中; 特殊情况:修改swiper指示点样式时,需要包裹在swiper的样式选择器下才生效。 直接将下列代码放在全局样式中是不会生效的,需要加上swiper组件的元素选择器或swiper组件的其他样式名也可。

    2024年02月05日
    浏览(19)
  • uni-app 微信小程序 onReachBottom 不生效

    问题描述: uni-app 微信小程序,页面滑到底部,onReachBottom 没有生效 代码: pages.json 配置 使用 onReachBottom 的页面: 总结: 最外层容器设置 min-height: 100.1vh

    2024年02月07日
    浏览(13)
  • uni-app微信小程序如何渲染markdown

    在开发个人网站微信登录平台易登微信小程序的时候,由于说明文档是用markdown格式来书写的,在网页上有各种markdown个人渲染引擎,比如这个markdown编辑器无敌了!。 但是在小程序上还是第一次渲染markdown,找了各种方案,但处处是坑,除此之外最后渲染出来的效果也惨不忍

    2024年02月16日
    浏览(13)
  • uni-app微信小程序——下拉多选框

    插件来自:select-cy - DCloud 插件市场  

    2024年02月11日
    浏览(25)
  • 微信小程序转uni-app注意事项

            如果你手头上有一套微信小程序的代码,怎样把它变成一个网页版或者app版本的呢?我推荐你使用uni-app。         使用uni-app可以很方便的将微信小程序代码翻译成uni-app项目,通过uni-app项目又可以编译成h5、app或微信小程序版本。这样一来,写一份代码同时可以

    2024年02月04日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包