微信小程序view叠加效果

小灰灰 2022-02-21 06:45 982阅读 0赞

**需要实现如下效果：**

![叠加效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70]

**WXML代码如下：**

<view class='evaluationContentItemLayout'>

<text class='evaluationContentText'>\{ \{item.name\}\}（\{ \{item.total\}\}）</text>

<progress class='evaluationContentProgress' percent='\{ \{item.progress\}\}' stroke-width='26' backgroundColor='\#fff' color='\#09BB07'></progress>

</view>

**WXSS代码如下：**

.evaluationContentItemLayout\{

width: auto;

height: auto;

position: relative;

\}

.evaluationContentText \{

font-size: 28rpx;

color: \#101010;

position: absolute;

margin-left: 10rpx;

top: 5rpx;

\}

.evaluationContentProgress\{

\}

**最终效果：**

颜色效果比较容易实现，故未做记录。

**![最终效果图][20190410153325846.png]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmxpdF82_size_16_color_FFFFFF_t_70]: /images/20220221/732f99740486499a97491a9c70fc8ef5.png
[20190410153325846.png]: /images/20220221/3c7e6dd1fb7d49af8d19a37f7b22c11b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，982人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序scroll-view

<scroll-view scroll-y style="height: 100%;"> <view class="green" style="width:

分手后的思念是犯贱/ 2023年03月13日 03:29/ 0 赞/ 25 阅读

相关微信小程序组件叠加效果（如 Android 中的添加蒙层）

实现的效果如下： ![效果图][1240] 可以看出这是由`image`组件和`text`组件叠加到一块组成的蒙层效果。 ![image.png][] 在小程序中实

妖狐艹你老母/ 2022年03月30日 11:53/ 0 赞/ 1922 阅读

相关微信小程序拖动组件：movable-view

原文：[https://www.jianshu.com/p/dd4feb9cc74f][https_www.jianshu.com_p_dd4feb9cc74f] 此次的更新

╰半橙微兮°/ 2022年03月07日 11:41/ 0 赞/ 312 阅读

相关微信小程序view叠加效果

需要实现如下效果： ![叠加效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

小灰灰/ 2022年02月21日 06:45/ 0 赞/ 983 阅读

相关微信小程序-解决scroll-view抖动

微信小程序scroll-view抖动原因：产品需要点击换一换，列表置顶并刷新，所以需要动态绑定scroll-view里面的scrollTop属性 scrollTop属性

冷不防/ 2022年01月12日 09:59/ 0 赞/ 1484 阅读

相关微信小程序-view元素Flex布局

对于网页布局，推荐 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以参考完全教材，我推荐一个阮老师的，下面是链接 > [

淩亂°似流年/ 2021年10月29日 17:46/ 0 赞/ 414 阅读

相关微信小程序 - 使用scroll-view

前言使用scroll-view时，轴横向移动不生效设置一、设置scroll-x="true" 二、设置height 三、在scroll-vi

﹏ヽ暗。殇╰゛Y/ 2021年09月30日 03:14/ 0 赞/ 305 阅读

相关微信小程序之view布局

.wxml ![Image 1][] .wxss ![Image 1][] 几个不同效果是view的属性不同产生的 ![Image 1][] ![Ima

怼烎@/ 2021年09月18日 03:02/ 0 赞/ 498 阅读

相关微信小程序web-view实例

![标题图][1240] 微信小程序`web-view`实例 `index.js` //index.js //获取应用实例 const app

旧城等待，/ 2021年09月16日 20:02/ 0 赞/ 420 阅读

相关微信小程序View视图容器组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面。借助这些

超、凢脫俗/ 2021年09月07日 22:02/ 0 赞/ 880 阅读