有没有小程序能做进度跟进表

发布网友发布时间：2022-04-21 17:50

我来回答

共5个回答

懂视网时间：2022-05-15 01:38

最近正在做微信小程序，需要实现一个流程进度的图样式，下面我给大家带来了微信小程序实现流程进度的图样式功能实例代码，需要的朋友参考下吧

最近正在做微信小程序，需要实现一个流程进度的图样式如下面

这里写图片描述

需求：

没完成的灰色小圆点表示
完成的使用蓝色小圆点设置
当前状态使用有外圈的小圆点表示

实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图

这里写图片描述

使用win10画板画的不好看

图上的意思就是每个item 前面有一段线条中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点。

按照上面的图片，html布局为下面

 <view class='order_process'>
 <view class='process_wrap' wx:for="{{processData}}" wx:key="">
 <view class='process'>
 <view class='process_line' style="background:{{item.start}}"></view>
 <image class='process_icon' src="{{item.icon}}"></image>
 <view class='process_line' style="background:{{item.end}}"></view>
 </view>
 <text class='process_name'>{{item.name}}</text>
 </view>
 </view>

OK 列表肯定需要一个数组啦数组如下面

processData: [{
 name: '提交工单',
 start: '#fff',
 end: '#EFF3F6',
 icon: '../../img/process_1.png'
 },
 {
 name: '已接单',
 start: '#EFF3F6',
 end: '#EFF3F6',
 icon: '../../img/process_1.png'
 },
 {
 name: '开始维修',
 start: '#EFF3F6',
 end: '#EFF3F6',
 icon: '../../img/process_1.png'
 },
 {
 name: '维修结束',
 start: '#EFF3F6',
 end: '#EFF3F6',
 icon: '../../img/process_1.png'
 },
 {
 name: '已确认',
 start: '#EFF3F6',
 end: '#fff',
 icon: '../../img/process_1.png'
 }],
 },

按照上面的item图片我们会看到直接显示的话两边会多处一条线来怎么去掉这两条线呢，很简单，让父容器的背景颜色跟先的颜色一样就好啦。

把父布局的背景改为白色，然后控制列表中第一个item中的前面的线段的颜色为白色，最后一个item中的后面的线段为白色。这样看起来两边的线段就去掉了

当数据改变的时候，我们只需要改变数组中对象的属性就好了。不如下面的做参考

//进度条的状态
 setPeocessIcon: function () {
 var index = 0//记录状态为1的最后的位置
 var processArr = this.data.processData
 // console.log("progress", this.data.detailData.progress)
 for (var i = 0; i < this.data.detailData.progress.length; i++) {
 var item = this.data.detailData.progress[i]
 processArr[i].name = item.word
 if (item.state == 1) {
 index = i
 processArr[i].icon = "../../img/process_3.png"
 processArr[i].start = "#45B2FE"
 processArr[i].end = "#45B2FE"
 } else {
 processArr[i].icon = "../../img/process_1.png"
 processArr[i].start = "#EFF3F6"
 processArr[i].end = "#EFF3F6"
 }
 }
 processArr[index].icon = "../../img/process_2.png"
 processArr[index].end = "#EFF3F6"
 processArr[0].start = "#fff"
 processArr[this.data.detailData.progress.length - 1].end = "#fff"
 this.setData({
 processData: processArr
 })
 },

上面代码的数据中，使用state代表完成和没完成。我们把完成的设置为蓝色把没完成的设置为灰色。

使用 index 来记录是不是当前点（当前点就是state表示完成的最后一个）。

最后css中的代码也很简单

.order_process {
 display: flex;
 flex-wrap: nowrap;
 padding: 10rpx 10rpx 20rpx 10rpx;
 background-color: #fff;
}

.process_wrap {
 display: flex;
 flex-direction: column;
 flex: 1;
 align-items: center;
}

.process {
 display: flex;
 align-items: center;
 width: 100%;
}

.process_icon {
 width: 50rpx;
 height: 50rpx;
}

.process_line {
 background: #eff3f6;
 flex: 1;
 height: 5rpx;
}

.process_name {
 font-size: 24rpx;
}

上面是我整理给大家的，希望今后会对大家有帮助。

Vue中使用Elememt-UI构建管理后台（详细教程）

在react-native中通过WebView处理返回非回调方法

在Vue2.5中通过json文件读取数据的方法

在vue2.5.2中使用http请求如何获取静态json数据

在jQuery幻灯片中使用插件owlcarousel（详细教程）

热心网友时间：2022-05-14 22:46

这个还是有的，目前小程序的功能已经非常强大，几乎可以实现所有的功能，比如有识别图文的小程序、有计步领礼物的小程序等等，对于做进度跟进表的小程序也是有的，这个可以进入到微信，打开“发现”——选择小程序，然后在搜索框内搜索就可以了。对于自己感觉有用的小程序，还可以收藏到“我的小程序”当中，还可以发送到桌面，当做app使用，非常方便。小程序的开发大致有三种方式：
一、自己有多年的编程基础，自己学习，自己研究。
二、使用第三方小程序开发工具这种方式是使用第三方的小程序开发工具，比如我就是使用的牛刀云。这类工具一般都不需要编程。区别于微信小程序官方的代码编辑器，这类工具是图形化的界面。做小程序就像做PPT一样。把图片、文字、音乐等等东西插入，然后设置它们的效果，编辑好后，使用这类工具直接自动小程序代码，把生成的小程序代码上传到微信审核就可以上线自己的小程序了。
三、专业的微信小程序开发公司这类企业都有专门的技术团队和丰富的开发经验，商家只要把需求提供给公司，然后跟技术进行交流一下，把你的想法和需求说明，就可以开始了。
商家想要找第三方开发合作公司要综合的考察，因为互联网的发展日新月异，公司的发展时间，有没有实力，开发的小程序能不能够满足需求等问题一直困扰着客户。

热心网友时间：2022-05-15 00:04

热心网友时间：2022-05-15 01:38

可以的江西特飞科技有限公司可以做

热心网友时间：2022-05-15 03:30

这个是有的，目前小程序的功能已经非常普遍了，几乎可以实现所有app的功能。打开微信，在“发现”里选择小程序，然后在搜索框内搜索就可以了。
但对于部分有特殊功能需求的小程序就需要找公司进行个性化定制，以满足不同行业不同功能的要求了。

全部频道

有没有小程序能做进度跟进表