微信小程序如何实现星级评价效果？长尾词优化怎么做？

本文共计842个文字，预计阅读时间需要4分钟。

本文分享了一个微信小程序实现星级评价效果的代码示例。以下是大致内容：

效果预览：

+ WXML代码部分：

代码说明：

+ `topMaxBox`：用于包裹整个星级评价的容器。+ `topLeft`：用于放置星级评价中的图片或文字。+ `imgW`：图片或文字的宽度。+ `高度值`：图片或文字的高度。

参考：

+ 微信小程序官方文档+ 网络上的微信小程序教程

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

效果预览：

wxml代码部分：

<view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='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 }); }, })

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