我们经常会有对服务或者物品的评价,通用的方式就是五星,通过触摸快速达到评级的效果。
先看一下实现的效果图:

如上图所示,这里我们要添加三个五星点评。第一个[描述符合],第二个[发货速度],第三个[服务态度]。
我们这里之讲解一下,“描述相符”的点评
WXML代码
描述相符
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这里通过一个变量flag的值的变化,来控制和确定[描述相符]这个评分的具体值。
为每个星星都绑定了一个改变评分的事件函数,来设置值的变化。
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;*/
}更多微信小程序中的五星点评相关文章请关注PHP中文网!










