微信小程序小技巧系列《七》五星評分，制作微信小程序組件 ... ...
發(fā)布時間：2018-02-06 17:04 所屬欄目：小程序開發(fā)教程
一：實現(xiàn)五星點評
先看一下效果圖：
如上圖所示，這里我們要添加三個五星點評。
我們這里之講解一下，“描述相符”的點評
WXML代碼
<!--星星評價-->
<view class="comment1-description" style="display:flex;flex-direction:row;">
<view class="comment1-description1">描述相符</view>
<view class="star-pos" style="display:flex;flex-direction:row;">
<view class="stars {{flag0>=1? 'on': ''}}" bindtap="changeColor1"></view>
<view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view>
<view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view>
<view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view>
<view class="stars {{flag0>=5? 'on': ''}}" bindtap="changeColor5"></view>
</view>
</view>
|
JS代碼
Page({
data:{
flag:0
},
changeColor1:function(){
var that = this;
that.setData( {
flag: 1
});
},
changeColor2:function(){
var that = this;
that.setData( {
flag:2
});
},
changeColor3:function(){
var that = this;
that.setData( {
flag: 3
});
},
changeColor4:function(){
var that = this;
that.setData( {
flag:4
});
},
changeColor5:function(){
var that = this;
that.setData( {
flag: 5
});
},
|
WCSS代碼
/*星星的樣式*/
.stars{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
margin-left: 40rpx;
}
.on{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
/*margin-left: 10px;*/
|
