小程序自定义步骤条实现

效果展示:

WX20230721-142035.png

支持背景颜色自定义

<view class="hl_steps"><view class="hl_steps_item" wx:for="{{steps}}" wx:key="id"><view class="hl_steps_item_circle_out" style="background-color: {{color[index%color.length][0]}};"><view class="hl_steps_item_circle_in" style="background-color: {{color[index%color.length][1]}};"></view></view><view class="hl_steps_item_box" style="background-color: {{color[index%color.length][0]}};"><view class="step_item_line" style="border-color: {{color[index%color.length][1]}};"></view><view class="hl_steps_item_title">{{item.title}}</view><view class="hl_steps_item_desc">{{item.desc}}</view></view></view>
</view>
.hl_steps{overflow: hidden;
}.hl_steps_item {display: flex;margin: 30rpx;box-sizing: border-box;position: relative;
}.hl_steps_item_circle_out {width: 44rpx;height: 44rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;
}.hl_steps_item_circle_in {width: 22rpx;height: 22rpx;border-radius: 50%;flex-shrink: 0;
}.hl_steps_item_box {box-sizing: border-box;width: 100%;margin-left: 20rpx;padding: 16rpx 24rpx;border-radius: 12rpx;position: relative;
}.step_item_line {height: 100%;position: absolute;left: -42rpx;top: 38rpx;border-left: 2rpx dashed;
}.hl_steps_item:nth-last-of-type(1) .step_item_line {border: none;
}.hl_steps_item_title {font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #363A44;line-height: 40rpx;
}.hl_steps_item_desc {margin-top: 10rpx;font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #363A44;line-height: 40rpx;
}
// components/bottom-pop/index.js
Component({/*** 组件的属性列表*/properties: {color: {type: Array,value: [["rgba(254, 192, 48, .2)", "rgba(254, 192, 48, 1)"],["rgba(147, 165, 164, .2)", "rgba(147, 165, 164, 1)"],["rgba(0, 78, 204, .2)", "rgba(0, 78, 204, 1)"],["rgba(79, 192, 141, .2)", "rgba(79, 192, 141, 1)"],]},steps: {type: Array,value:[]}},/*** 组件的初始数据*/data: {isIphoneX: false,animationData: {}},/*** 组件的方法列表*/methods: {},pageLifetimes: {show: function () {// 页面被展示},hide: function () {// 页面被隐藏},resize: function (size) {// 页面尺寸变化}},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringCloud Alibaba】(二)微服务环境搭建

1. 项目流程搭建 整个项目主要分为 用户微服务、商品微服务和订单微服务&#xff0c;整个过程模拟的是用户下单扣减库存的操作。这里&#xff0c;为了简化整个流程&#xff0c;将商品的库存信息保存到了商品数据表&#xff0c;同时&#xff0c;使用商品微服务来扣减库存。小伙…

「苹果安卓」手机搜狗输入法怎么调整字体大小及键盘高度?

手机搜狗输入法怎么调整字体大小及键盘高度&#xff1f; 1、在手机上准备输入文字&#xff0c;调起使用的搜狗输入法手机键盘&#xff1b; 2、点击搜狗输入法键盘左侧的图标&#xff0c;进入更多功能管理&#xff1b; 3、在搜狗输入法更多功能管理内找到定制工具栏&#xff0c…

[数据结构 -- C语言] 二叉树(BinaryTree)

目录 1、树的概念及结构 1.1 树的概念 1.2 树的相关概念&#xff08;很重要&#xff09; 1.3 树的表示 2、二叉树的概念及结构 2.1 概念 2.2 特殊二叉树 2.3 二叉树的性质&#xff08;很重要&#xff09; 2.4 练习题 2.5 二叉树的存储结构 2.5.1 顺序存储 2.5.2 链…

Jenkins报警机制的配置与Linux的使用总结

先在钉钉中添加一个机器人 在Configure System中找到机器人选项&#xff0c;并且复制webhook到网络钩子&#xff0c;然后添加机器人的编号、名称和关键词&#xff0c;然后点击测试&#xff0c;如果显示测试成功则表示配置成功&#xff0c;最后保存 再到配置中勾选顶顶机器人的定…

【CMU15-445 FALL 2022】Project #1 - Buffer Pool

About 实验官网 Project #1 - Buffer Pool在线评测网站 gradescope Lab Task #1 - Extendible Hash Table 详见——【CMU15-445 FALL 2022】Project #1 - Extendable Hashing 如果链接失效&#xff0c;请查看当前平台我之前发布的文章。 Task #2 - LRU-K Replacement Polic…

YOLOv5基础知识

定位和检测: 定位是找到检测图像中带有一个给定标签的单个目标 检测是找到图像中带有给定标签的所有目标 图像分割和目标检测的区别&#xff1a; 图像分割即为检测出物体的完整轮廓&#xff0c;而目标检测则是检测出对应的目标。&#xff08;使用框框把物体框出来&#xff…

常见JVM参数配置和GC性能优化

常见的JVM参数配置 垃圾回收统计信息 -XX:PrintGC 打印GC简要信息 -XX:PrintGCDetails打印GC的详细信息 -XX:PrintGCTimeStamps打印CG发生的时间戳 -Xloggc:log/gc.log 指定GC log的位置&#xff0c;以文件输出 -XX:PrintHeapAtGC 每一次GC前和GC后&#xff0c;都打印堆信…

SAP客制化区域菜单和IMG配置清单

1. 自定义区域菜单 事务代码 SE43&#xff0c;操作如下 添加菜单对象 展示效果 输入区域菜单名称并回车&#xff0c;效果如下 2. 自定义IMG配置 事务代码 SIMGH IMG structure 示例-事务代码入口 示例-表格维护入口 示例-自定义代码控制对象 需要创建dummy表并设置表维护 页面设…

React、Vue框架如何实现组件更新,原理是什么?

引言 React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个组件树。本文将从React和Vue的组件更新原理入手,剖析两…

Progressive Dual-Branch Network for Low-Light Image Enhancement 论文阅读笔记

这是22年中科院2区期刊的一篇有监督暗图增强的论文 网络结构如下图所示&#xff1a; ARM模块如下图所示&#xff1a; CAB模块如下图所示&#xff1a; LKA模块其实就是放进去了一些大卷积核&#xff1a; AFB模块如下图所示&#xff1a; 这些网络结构没什么特别的&#xf…

分布式光伏监控系统运维系统实时查看数据分布式光伏电站监控管理

光伏电站是一种利用太阳能发电的设施&#xff0c;随着人们对可再生能源的需求不断增加&#xff0c;光伏电站的建设也越来越普遍。但是&#xff0c;光伏电站的运营和管理需要高质量的监控系统来确保其正常运行。本文将介绍光伏电站监控系统的组成及其原理。 详细软件具体需求可…

冒泡排序与快速排序(交换排序)

目录 前言 一、冒泡排序 1.基本思想 2.冒泡排序&#xff1a; 3.代码实现&#xff1a; 二、快速排序 1. 概念&#xff1a; 2.三种实现&#xff1a; 3.代码实现&#xff1a; 4.优化: 前言 所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序…

【二等奖方案】基于人工智能的漏洞数据分类赛题「道可道,非常道」团队解题思路

2022 CCF BDCI 大赛 数字安全公开赛「基于人工智能的漏洞数据分类」赛题二等奖团队「道可道&#xff0c;非常道」战队获奖方案&#xff0c;赛题地址&#xff1a; http://go.datafountain.cn/s57 团队简介 本团队具有丰富的比赛和项目经验。在AI大赛上多次拿到Top成绩&#xf…

FFMPEG源码之过滤器

功能介绍 FFmpeg的过滤器是用于对音视频流进行处理和转换的模块。它可以对输入流进行各种操作&#xff0c;如调整大小、调节亮度、对比度、裁剪、旋转等。 操作步骤 实现对某个视频的放大操作的详细步骤如下&#xff1a; 配置和初始化FFmpeg&#xff1a;在开始编写代码之前…

线性表之链表

1、链表概述 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 顺序表的存储位置可以用一个简单直观的公式表示&#xff0c;它可以随机存取表中任意一个元素&#xff0c;但插入和删除需要移动大量元素。链式…

深入理解 PostgreSQL 的架构和内部工作原理

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

Postman怎么做接口测试-以简单的登录接口为例

我们就以登录某测试系统为例子&#xff0c;实现在Postman上做接口测试 一、首先打开系统首页首页&#xff0c;做一个登录操作&#xff08;目的是获取接口url及参数&#xff09;&#xff1a;一般在公司做接口测试的时候页面还没有出来&#xff0c;我们需要根据接口文档进行接口…

kafka第三课-可视化工具、生产环境问题总结以及性能优化

一、可视化工具 https://pan.baidu.com/s/1qYifoa4 密码&#xff1a;el4o 下载解压之后&#xff0c;编辑该文件&#xff0c;修改zookeeper地址&#xff0c;也就是kafka注册的zookeeper的地址&#xff0c;如果是zookeeper集群&#xff0c;以逗号分开 vi conf/application.conf 启…

Python 逻辑回归:理论与实践

文章目录 1. 介绍1.1 什么是逻辑回归&#xff1f;1.2 逻辑回归的应用领域 2. 逻辑回归的原理2.1 Sigmoid 函数2.2 决策边界2.3 损失函数 3. 逻辑回归的实现3.1 数据准备3.2 创建逻辑回归模型3.3 模型训练3.4 模型预测3.5 模型评估 4. 可视化决策边界4.1 绘制散点图4.2 绘制决策…

基于SaaS模式的Java基层卫生健康云HIS系统源码【运维管理+运营管理+综合监管】

云HIS综合管理平台 一、模板管理 模板分为两种&#xff1a;病历模板和报表模板。模板管理是运营管理的核心组成部分&#xff0c;是基层卫生健康云中各医疗机构定制电子病历和报表的地方&#xff0c;各医疗机构可根据自身特点特色定制电子病历和报表&#xff0c;制作的电子病历…