JS
앱 getApp = VAR ()
페이지 ({
데이터 : {
NUM :. 8이며, 현재 // 여러 사람
jindutiao : // 이것은 표준 진행률 표시 줄, 규모
{
NUM :. 3,
가격 :. '999'
},
{
NUM :. 5
가격 '799'.
},
{
NUM : 10
가격 '599'.
}
]
}
는, OnLoad : 함수 () {
this.jindutiao ();
}
jindutiao : 함수 () {
VAR = 것을 본 ;
VAR = jindutiao that.data.jindutiao;
VAR NUM = that.data.num;
VAR P = 0;
(VAR은 I = 0; I <jindutiao.length; I ++) {위해
IF (jindutiao [I] .num> NUM ) {
P = I;
BREAK;
}
}
IF (I == jindutiao.length) P = {I}
(VAR은 J = 0; J <P, J ++) {위한
jindutiao [J] = true로 .statu;
}
IF (P == 0) {
NUM = 0.5 / * jindutiao.length 100;
}는 다른 IF ([. P - 1] jindutiao .num <NUM) {
NUM = (P + 0.5) / jindutiao.length * 100;
// 분취 결국 아닌 현재 진행되므로 그하자 또한 중간에 8,7,6 동일 할 수있다. 0.5 가하고
다른 {}
NUM은 = P / jindutiao.length * 100;
//이 비율 진행 바 폭 사람의 총 수에 의해 나누어 100을 곱한 현재 길이 황색 진행한다.
}
That.setData ({
폭 : NUM,
P : P,
jindutiao : jindutiao
})
}
})
CSS
<뷰 클래스 = "bigs1">
<뷰 클래스 = '귀'>
<블록 WX = 대한 "{{jindutiao}}">
<뷰 클래스 = 'viewsmall'> </ 뷰>
<뷰 클래스 = "zhongJianSelect"WX : 만약 = "{{item.statu}}"> </ 뷰>
<뷰 클래스 = "종 지앙"WX : 다른> </ 뷰>
</ 블록>
</ 뷰>
<! -刻度杠->
< 뷰 클래스 = 'kedudian'style = "는 왼쪽 {{폭 11}} %가">
scaleToFill'SRC = "... / IMG / dialog.png '클래스 ='jinduPng '> </ 화상 <화상 모드 ='을>
<텍스트 클래스 = 'cantuanNumber'> {{NUM}}人已参团</ 텍스트>
</ 뷰>
<뷰 클래스 = '황'스타일 = "너비 : {{폭}} %를"> </ 뷰>
</ 뷰>
<뷰 클래스 = 'bigs2'>
<뷰 클래스 = 'viewbig'>
<블록 WX = 대한 "{{jindutiao}}">
<뷰 클래스 = 'viewsmall2'WX : 만약 = "{{item.statu}}">
<텍스트 등급 = 'viewsmall2Text'> {{}} item.num人团</ 텍스트>
<텍스트 등급 = 'viewsmall2Text'> ¥ item.price {{}} </ 텍스트>
</ 뷰>
<뷰 클래스 = ' viewsmall2 'WX : 다른>
<텍스트 클래스 ='viewsmall2Text viewsmall2TextSelect '> {{item.num}}人团</ 텍스트>
<텍스트 클래스 ='viewsmall2Text viewsmall2TextSelect '> ¥ {{item.price}} </ 텍스트>
< / 뷰>
</ 블록>
</보기>
wxml
<뷰 클래스 = "bigs1">
<뷰 클래스 = '귀'>
<블록 WX = 대한 "{{jindutiao}}">
<뷰 클래스 = 'viewsmall'> </ 뷰>
<뷰 클래스 = "zhongJianSelect"WX : 만약 = "{{item.statu}}"> </ 뷰>
<뷰 클래스 = "종 지앙"WX : 다른> </ 뷰>
</ 블록>
</ 뷰>
<! -刻度杠->
< 뷰 클래스 = 'kedudian'style = "는 왼쪽 {{폭 11}} %가">
scaleToFill'SRC = "... / IMG / dialog.png '클래스 ='jinduPng '> </ 화상 <화상 모드 ='을>
<텍스트 클래스 = 'cantuanNumber'> {{NUM}}人已参团</ 텍스트>
</ 뷰>
<뷰 클래스 = '황'스타일 = "너비 : {{폭}} %를"> </ 뷰>
</ 뷰>
<뷰 클래스 = 'bigs2'>
<뷰 클래스 = 'viewbig'>
<블록 WX = 대한 "{{jindutiao}}">
<뷰 클래스 = 'viewsmall2'WX : 만약 = "{{item.statu}}">
<텍스트 등급 = 'viewsmall2Text'> {{}} item.num人团</ 텍스트>
<텍스트 등급 = 'viewsmall2Text'> ¥ item.price {{}} </ 텍스트>
</ 뷰>
<뷰 클래스 = ' viewsmall2 'WX : 다른>
<텍스트 클래스 ='viewsmall2Text viewsmall2TextSelect '> {{item.num}}人团</ 텍스트>
<텍스트 클래스 ='viewsmall2Text viewsmall2TextSelect '> ¥ {{item.price}} </ 텍스트>
< / 뷰>
</ 블록>
</보기>
재판 https://blog.csdn.net/qq_34622811/article/details/80900361