微信小程序小技巧系列《七》五星评分，制作微信小程序组件 ... ...
发布时间：2018-02-06 17:04 所属栏目：小程序开发教程
一：实现五星点评
先看一下效果图：
如上图所示，这里我们要添加三个五星点评。
我们这里之讲解一下，“描述相符”的点评
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;*/
|
