欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-05 09:27:54
本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果预览: wxml代码部分:

wxml代码部分:

<view class='topmaxbox'>
 <view class='topleft' style='width: {{ imgw }}px; height: {{ imgw }}px; flex: {{ imgw }}px 0 0;'>
 <image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image>
 </view>
 <view class='topright'>
 <view class='r_top'>
  <text>商品名称</text>
  <text>{{ evaluate }}</text>
 </view>
 <view class='r_bottom' catchtouchmove='movefun' catchtouchstart='movefun'>
  <image src='{{ starsrc }}'></image>
 </view>
 </view>
</view>

wxss代码部分:

.topmaxbox{
 padding: 5%;
 display: flex;
 flex-direction: row;
}

.topleft{
 border: 1px solid #e5e5e5;
 margin-right: 10px;
}

.topleft image{
 width: 100%;
 height: 100%;
}

.topright{
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.r_top{
 display: flex;
 justify-content: space-between;
 margin-bottom: 2%;
}

.r_bottom image{
 width: 130px;
 height: 18px;
}

app.sysinfo()封装在了app.js 文件全局使用下面是代码部分

 /**
 * 获取系统信息
 */
 sysinfo: function () {
 let res = wx.getsysteminfosync();
 let info = {
  width: res.windowwidth,//可使用窗口宽度
  height: res.windowheight,//可使用窗口高度
  system: res.system,//操作系统版本
  statusbarheight: res.statusbarheight//状态栏的高度
 }
 return info;
 },

js代码部分:

const app = new getapp();

// page/issueevaluate/issueevaluate.js
page({

 /**
 * 页面的初始数据
 */
 data: {
 imgw: app.sysinfo().width * 0.146,//根据屏幕宽度动态设置图片宽度
 starlen: 5,//星星评价的初始等级
 starsrcarr: ['../../image/star2-1.png', '../../image/star2-2.png', '../../image/star2-3.png', '../../image/star2-4.png', '../../image/star2-5.png', '../../image/star2-6.png'],//星星评价的图片资源数组
 starsrc: '../../image/star2-6.png',//星星评价的初始图片
 evaluate: '非常好',
 evaluatearr: ['非常差', '差', '一般', '好', '比较好', '非常好']
 },

 movefun: function (e) {
 let imgboxw = app.sysinfo().width * 0.146 + 10;//商品图片x轴尽头坐标(即星星的初始坐标值)
 let starw = 130 / 5;//每一颗星星的宽度(用于计算星星的x轴坐标)
 let xaxial = e.touches[0].clientx;//获取当前触摸的x轴坐标

 //如果当前触摸的x轴坐标小于初始坐标则显示为0颗星星
 if (xaxial < imgboxw) {
  this.data.starlen = 0;
  //如果当前触摸的x轴坐标大于初始坐标并小于第2颗星星的初始坐标则显示为1颗星星
 } else if (imgboxw + (starw * 2) > xaxial && xaxial > imgboxw) {
  this.data.starlen = 1;
  //如果当前触摸的x轴坐标大于第2颗星星的初始坐标并小于第3颗星星的初始坐标则显示为2颗星星
 } else if (imgboxw + (starw * 3) > xaxial && xaxial > imgboxw + (starw * 2)) {
  this.data.starlen = 2;
  //如果当前触摸的x轴坐标大于第3颗星星的初始坐标并小于第4颗星星的初始坐标则显示为3颗星星
 } else if (imgboxw + (starw * 4) > xaxial && xaxial > imgboxw + (starw * 3)) {
  this.data.starlen = 3;
  //如果当前触摸的x轴坐标大于第4颗星星的初始坐标并小于第5颗星星的初始坐标则显示为4颗星星
 } else if (imgboxw + (starw * 5) > xaxial && xaxial > imgboxw + (starw * 4)) {
  this.data.starlen = 4;
  //如果当前触摸的x轴坐标大于第5颗星星初始坐标则显示为5颗星星
 } else if (xaxial > imgboxw + (starw * 5)) {
  this.data.starlen = 5;
 }
 //设置img标签的src路径 替换成对应的星星图片
 this.data.starsrc = this.data.starsrcarr[this.data.starlen];
 //设置为对应的评价等级文字
 this.data.evaluate = this.data.evaluatearr[this.data.starlen];
 this.setdata({
  starsrc: this.data.starsrc,
  evaluate: this.data.evaluate
 });
 },

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。