微信小程式五星點評
阿新 • • 發佈:2018-11-20
效果圖:
主要思路
小程式是把樣式寫好動態改變樣式,而不能操作dom,所以還是老方法。
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="starsM {{flag2>=1? '': 'hideStar'}}" bindtap="changeColor11"></view>
<view class="starsM {{flag2>=2? '': 'hideStar'}}" bindtap="changeColor12"></view>
<view class="starsM {{flag2>=3? '': 'hideStar'}}" bindtap ="changeColor13"></view>
<view class="starsM {{flag2>=4? '': 'hideStar'}}" bindtap="changeColor14"></view>
<view class="starsM {{flag2>=5? '': 'hideStar'}}" bindtap="changeColor15"></view>
</view>
</view>
JS程式碼:
Page({
data:{
flag2:5
},
changeColor11:function(){
var that = this;
that.setData( {
flag2: 1
});
},
changeColor12:function(){
var that = this;
that.setData( {
flag2:2
});
},
changeColor13:function(){
var that = this;
that.setData( {
flag2: 3
});
},
changeColor14:function(){
var that = this;
that.setData( {
flag2:4
});
},
changeColor15:function(){
var that = this;
that.setData( {
flag2: 5
});
}
})
WXSS程式碼:
.comment1-description{
margin-top: 35rpx;
}
.comment1-description1{
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #333333;
margin-left: 30rpx;
}
.star-pos {
position: absolute;
right: 0px;
margin-right: 40rpx;
}
.comment1-description .star-pos .hideStar{
z-index: 2;
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 83rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
background-position: center center;
background-repeat: no-repeat;
}
.starsM{
z-index: 1;
width: 83rpx;
height: 43rpx;
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/[email protected]");
background-size: 43rpx 43rpx;
background-position: center center;
background-repeat: no-repeat;
}