第一种方法：

WXML代码：

<view>星级评分
</view><view><block class="brightStars"><image data-index='0' data-no="{{item}}" wx:for="{{starsBox}}"  bindtap="changePic" wx:key="index" src="{{flag[0]>=item? '../img/starFull.png' : '../img/star.png'}}"></image></block><view class="texts">{{startext[0]}}</view>
</view>

JS代码：

Page({data: {flag: [0, 0, 0],startext: ['', '', '', ],starsBox: [1, 2, 3, 4, 5]},changePic: function (e) {var index = e.currentTarget.dataset.index;console.log(index,'-');var num = e.currentTarget.dataset.no;console.log(num);var a = 'flag[' + index + ']';console.log(a);var b = 'startext[' + index + ']';console.log(b);var that = this;if (num == 1) {that.setData({[a]: 1,[b]: '非常不满意'});} else if (num == 2) {that.setData({[a]: 2,[b]: '不满意'});} else if (num == 3) {that.setData({[a]: 3,[b]: '一般'});} else if (num == 4) {that.setData({[a]: 4,[b]: '满意'});} else if (num == 5) {that.setData({[a]: 5,[b]: '非常满意'});}},})

WXSS代码：

.container{display: flex;flex-direction: row;padding: 0;flex-wrap: nowrap;}image{width: 50px;height: 50px;
}

第二种方法：

WXML内容：

<view>星级评分</view><block wx:for="{{starYesNum}}" wx:key="index"><image bindtap="selectStar" id='{{index+1}}' data-in='selectStarYes' src='../../static/img/starY.png'></image>
</block>
<block wx:for="{{starNoNum}}"  wx:key="index"><image bindtap='selectStar' id='{{index+1}}' data-in='selectStarNo' src='../../static/img/starN.png'></image>
</block>
<view>{{starYesNum}}星</view>第一个block标签内是亮星星的盒子
第二个block标签内是不亮星星的盒子通过改变亮星星的数量和不亮星星的数量实现星级

JS代码：

Page({data: {starYesNum:0,       //点亮的星星数量starNoNum:5,        //不点亮的星星数量},selectStar:function(e){console.log(e.target.id);console.log(e.currentTarget.dataset.in);//判断点击的星星是亮的星星还是不亮的星星,并进行设置if(e.currentTarget.dataset.in == 'selectStarNo'){this.setData({starYesNum: Number(e.target.id) + Number(this.data.starYesNum), starNoNum:5-Number(e.target.id) - Number(this.data.starYesNum)})}else{this.setData({starYesNum:Number(e.target.id ),starNoNum:Number(5-e.target.id)})}},
})

微信小程序星级评分方法相关推荐

[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
微信小程序星级评分和展示
正文:用户点击第几颗星星就显示为几星评分 wxml文件代码 <view class='assess_sec_img'><block wx:for="{{empty_star ...
微信小程序星级评分（例如店铺小数点评分）
示例: 首先准备三种不同的星星图片,满星.半星.空星的: 示例代码: 比如评分是小数点 4.8分,就根据相应的判断显示内容,乘以10好取余:接口返回的字段名称替换4.8就欧了: <block w ...
微信小程序星级评分 (带小数的评分/半星)
首先准备三种不同的星星图片,满星.半星.空星的: 示例代码: 比如评分是小数点 4.8分,就根据相应的判断显示内容,乘以10好取余:接口返回的字段名称替换4.8就欧了: <block wx:fo ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...
微信小程序星星评分代码片段（含半星）
微信小程序星星评分代码片段(含半星) 代码思路完整代码代码片段图片资源写代码时需要一个点击星星评分的功能安卓直接用RatingBar非常轻松的解决了到了小程序,没有现成的封装方法可以用了, ...
微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
微信小程序定义公共方法
微信小程序定义公共方法还是很简单的,一个三步创建,引入,使用 1.创建在page创建文件夹utils,在创建文件utils.js,看下我的在utils.js中定义你的方法,然后导出 2.引入在你 ...
解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...

微信小程序星级评分方法

第一种方法：

第二种方法：

微信小程序星级评分方法相关推荐

最新文章

热门文章