博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序——漂亮的步骤条(好看)
阅读量:756 次
发布时间:2019-03-23

本文共 1564 字,大约阅读时间需要 5 分钟。

漂亮的步骤条

效果图:

在这里插入图片描述

这里实现4个步骤,要其他步骤的可以根据代码来改,下面我们来看看代码具体是怎么实现的:

.js代码

Page({
data: {
stepList: [{
name: '开始' }, {
name: '扫描' }, {
name: '付款' }, {
name: '完成' }, ], stepNum: 1 //当前的步数 }, onLoad: function () {
}, // 下一步 numSteps() {
this.setData({
stepNum: this.data.stepNum == this.data.stepList.length ? 1 : this.data.stepNum + 1 }) },})

.wxss代码

page {
width: 100%; height: 100%;}.steps_box {
width: 100%; display: flex; /* flex-direction: row; */ align-items: center; justify-content: center;}.block-step {
display: flex; flex-direction: row; /* align-items: center; justify-content: center; */}.view_item {
display: flex; align-items: center; justify-content: center; flex-direction: column;}.view_item text {
font-size: 30rpx; margin-top: 20rpx; /* color: #909090; */}.view_item view {
width: 45rpx; height: 45rpx; /* background-color: red; */ border: 3rpx solid #909090; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #909090; font-size: 30rpx; content: "\e732";}.view_line {
width: 15%; height: 5rpx; margin: 0rpx 2% 40rpx 2%; /* background: linear-gradient(to right, #ead6ee, #a0f1ea); */}.line_bgcolor1{
background-color: #e0e0e0;}.line_bgcolor{
background: linear-gradient(to right, #5fe7ff, #00a336);}

.wxml代码

{
{
index+1}}
{
{
item.name}}

转载地址:http://ugvzk.baihongyu.com/

你可能感兴趣的文章