현재 WeChat 애플릿을 작업 중이며 프로세스 진행 상황을 그래프 스타일로 구현해야 합니다. 아래에서 프로세스 진행 상황을 구현하기 위한 WeChat 애플릿의 그래프 스타일 기능에 대한 예제 코드를 가져왔습니다. 필요한 친구는 이를 참조할 수 있습니다.
현재 WeChat 애플릿을 작업 중입니다. 프로그램은 다음과 같이 프로세스 진행 차트 스타일을 구현해야 합니다.
요구 사항:
완료되지 않은 회색 점은 파란색 점을 사용하여 표시됩니다.
현황
을 표현하기 위해 작은 점을 사용하는 것은 비교적 간단합니다. 구현 아이디어는 목록을 사용하여 구현하는 것입니다. 목록에 있는 각 항목의 스타일은 아래와 같습니다.
그림의 의미는 각 항목 앞에 선이 있고 가운데에 원이 있고 뒤에 선이 있다는 것입니다. 그 이유는 아래 텍스트가 원 아래 중앙에 위치해야 하기 때문입니다. 텍스트가 필요하지 않은 경우 원 뒤에 직선이 오는 것이 더 간단할 것입니다.
위 그림에 따르면 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>
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' }], },
//进度条的状态 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 }) },
.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; }
Elememt-UI를 사용하여 Vue에서 관리 백엔드 구축(자세한 튜토리얼)
react-native의 WebView를 통해 비콜백 메서드 반환
Vue2.5에서 json 파일 읽기 데이터를 얻는 방법
vue2.5.2에서 http 요청을 사용하여 정적 json 데이터를 얻는 방법
jQuery 슬라이드쇼에서 플러그인 owlcarousel 사용(자세한 튜토리얼)
jQuery 슬라이드쇼에서 플러그인 owlcarousel 사용( 자세한 튜토리얼)
위 내용은 WeChat 미니 프로그램에서 프로세스 진행 스타일을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!