微信小程序实现星级评价效果

本文实例为大家分享了微信小程序实现日历效果的具体代码，供大家参考，具体内容如下

效果预览：

页面结构代码部分：

view class=' TopMaxBox ' view class=' TopLeft ' style=' width : { { IMgw } } px；height : { { IMgw } } pxflex : { { IMgw } } px 0；0 '图像src=' http://img 02。太开放了。com/images/20150928/tooopen _ sy _ 143912755726。jpg '/image/view view class=' topRight ' view class=' r _ top '文本商品名称/text text { { evaluate } }/text/view view class=' r _ bottom ' catch touch move=' moveFun ' catch touch start=' move fun ' image src=' { { starSrc } } '/image/view/view/view wxss代码部分：topMaxBox { padd : 5%；display : flex flex-方向：行；}.topLeft { border : 1px solid # e5e 5；右边距： 10px}.左上图像{宽度： 100%；高度： 100%;}.topRight { flex : 1；显示： flex flex-方向：柱；正义-内容：中心；}.r _ top { display : flex justice-content :空格；保证金-底部： 2%;}.r _底部图像{宽度： 130像素高度： 18px}app.sysInfo()封装在了app.js文件全局使用下面是代码部分

/** * 获取系统信息*/sysInfo:函数(){让RES=wx。GetSystemInfoSync()；let info={ width : RES . window width，//可使用窗口宽度height: res.windowHeight，//可使用窗口高度system: res.system，//操作系统版本res.statusBarHeight//:州际公路状态栏的高度}返回信息；}，js代码部分：

const app=new GetApp()；//page/issuevaluate/issuevaluate . js page({/* * * page的初始数据*/data : { imgw : app . sysinfo()。width * 0.146，//根据屏幕宽度动态设置画面宽度。//星级评定的初始评级为star rcar 3360['././image/star2-1.png '，'././image/star2-2.png '，'././image/star2-3.png '，'././././image/star2-5.png '，'././image/star2-6.png']，//star评估图像资源阵列starsrc: '././image/star2-6.png '，//star evaluation初始图像evaluate: EvaluateArr: ['非常差'，'差'，'一般'，'好'，'相对好'，'非常好']}，movefun :函数(e) {let imgboxw=app。sysinfo()。宽度* 0.146 10；//商品图片X轴末端的坐标(即星星的初始坐标值)让starW=130/5；//每个恒星的宽度(用于计算恒星的x轴坐标)让xaaxy=e . touches[0]。clientX//获取当前触摸的x轴坐标//如果当前触摸的x轴坐标小于初始坐标，则在(x轴imgboxw){ this . data . starlen=0；//如果当前触摸的x轴坐标大于初始坐标，小于第二颗星的初始坐标，则显示为星} else if(imgbox w(starw * 2)x轴x轴imgboxw) {this。data . starlen=1；//如果当前触摸的x轴坐标大于第二颗星的初始坐标，小于第三颗星的初始坐标，则显示为2颗星}否则如果(imgboxw(starw * 3)x轴x轴imgboxw(starw * 2)){ this . data . starlen=2；//如果当前触摸的x轴坐标大于第三颗星的初始坐标，小于第四颗星的初始坐标，则显示为3颗星}否则如果(imgboxw(starw * 4)x轴x轴imgboxw(starw * 3)){ this . data . starlen=3；//如果当前触摸的x轴坐标大于第4颗星的初始坐标，小于第5颗星的初始坐标，则显示为4颗星}否则如果(imgboxw(starw * 5)x轴x轴imgboxw(starw * 4)){ this . data . starlen=4；//如果当前触摸的x轴坐标大于第5颗星的初始坐标，则显示为5颗星}否则如果(x轴imgboxw (starw * 5)) {this。data . starlen=5；}//设置img标签的SRC路径，替换为对应的星图this . data . starsrc=this . data . starscarr[this . data . starlen]；//设置相应的评估等级文本this . data . evaluate=this . data . evaluate arr[this . data . star len]；this . setdata({ starcc : this . data . starcc，evaluate : this . data . evaluate })；}，})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。