首页 > PHP资讯 > 工具库 > 微信小程序中的五星点评

微信小程序中的五星点评

工具库
我们经常会有对服务或者物品的评价,通用的方式就是五星,通过触摸快速达到评级的效果。


先看一下实现的效果图:

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中文网!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持50不支持0