微信小程序實現(xiàn)展示評分結果功能
更新時間：2019年02月15日 12:49:24 作者：紫雪璇雨
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)展示評分結果功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)展示評分結果的具體代碼，供大家參考，具體內(nèi)容如下
星星評分展示1
根據(jù)評分展示整顆行星或者半顆星星
星星評分展示2
根據(jù)評分按照小數(shù)點展示整顆行星或者部分星星
wxml
<view class="conmmentbox">
<view class="starbox">
<view class="stars2" style="width: 130rpx">
<view>
<image src="../../image/token_img/lp_ct2.png"></image>
<image src="../../image/token_img/lp_ct2.png"></image>
<image src="../../image/token_img/lp_ct2.png"></image>
<image src="../../image/token_img/lp_ct2.png"></image>
<image src="../../image/token_img/lp_ct2.png"></image>
</view>
</view>
<view class="stars" style="width: {{praisestars}};">
<view>
<image src="../../image/token_img/lp_dj1.png"></image>
<image src="../../image/token_img/lp_dj1.png"></image>
<image src="../../image/token_img/lp_dj1.png"></image>
<image src="../../image/token_img/lp_dj1.png"></image>
<image src="../../image/token_img/lp_dj1.png"></image>
</view>
</view>
</view>
{{ praiseNum }}分
</view>
wxss
.conmmentbox{
display: inline-block;
font-size: 22rpx;
color: #F74754;
}
.conmmentstars{
width: 26rpx;
height: 26rpx;
}
.doortimes{
color: #F74754;
margin-left: 10rpx;
}
.starbox{
width: 130rpx;
height: 30rpx;
position: relative;
display: inline-block;
overflow: hidden;
float: left;
}
.stars{
width: 130rpx;
height: 30rpx;
position: relative;
top: 0;
left: 0;
overflow: hidden;
}
.stars2{
height: 30rpx;
width: 130rpx;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.stars image,.stars2 image{
width: 26rpx;
height: 26rpx;
float: left;
white-space:nowrap;
}
.stars view,.stars2 view{
width: 130rpx;
position: absolute;
}
js
//星星評分
var praiseNums=res.data.result.praiseNum;//獲取數(shù)據(jù)評分
var praisestars=(praiseNums/5)*100+'%';
// console.log(praisestars);
that.setData({
praisestars: praisestars
})
星星評分
單擊星星，整顆星星
wxml
<!--pages/test/test.wxml-->
<view>
<view>一:顯示后臺給的評分</view>
<block wx:for="{{one_1}}">
<image src='../../images/use_sc2.png'></image>
</block>
<block wx:for="{{two_1}}">
<image src='../../images/use_sc.png'></image>
</block>
</view>
<view>這里num給的是幾分就顯示幾顆星星</view>
<view style='margin-top:60px;'>二:顯示用戶選擇的評分</view>
<block wx:for="{{one_2}}" wx:key="index">
<image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../images/use_sc2.png'></image>
</block>
<block wx:for="{{two_2}}" wx:key="index">
<image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../images/use_sc.png'></image>
</block>
<view>{{one_2}}星</view>
js
// pages/test/test.js
Page({
/**
* 統(tǒng)一滿分為5星
*/
data: {
num: 4,//后端給的分數(shù),顯示相應的星星
one_1: '',
two_1: '',
one_2: 0,
two_2: 5
},
onLoad: function (options) {
//情況一:展示后臺給的評分
this.setData({
one_1: this.data.num,
two_1: 5 - this.data.num
})
},
//情況二:用戶給評分
in_xin:function(e){
var in_xin = e.currentTarget.dataset.in;
var one_2;
if (in_xin === 'use_sc2'){
one_2 = Number(e.currentTarget.id);
} else {
one_2 = Number(e.currentTarget.id) + this.data.one_2;
}
this.setData({
one_2: one_2,
two_2: 5 - one_2
})
}
})
wxss
/* pages/test/test.wxss */
image{
height: 60rpx;
width: 60rpx;
display: inline-block
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文介紹了根據(jù)Json串生成Html的一種方式（只是簡單實現(xiàn)了文本框，密碼框，下拉框）感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了關于moment.js的常用方法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了JS+css3實現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
去除鏈接虛線全面分析總結...2006-08-08
本文主要介紹了基于javascript實現(xiàn)報表頁面集成天氣的方法步驟，簡單三步，一看就懂。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細介紹了MvcPager分頁控件，修改后適用于Bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript判斷變量名是否存在數(shù)組中的實例
下面小編就為大家分享一篇JavaScript判斷變量名是否存在數(shù)組中的實例，具有很的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了JS去除iframe滾動條的方法,涉及javascript操作iframe中屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
js實現(xiàn)PC端根據(jù)IP定位當前城市地理位置
本文主要分享了js實現(xiàn)PC端根據(jù)IP定位當前城市地理位置的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
ES6解構賦值(數(shù)組,對象,函數(shù))使用詳解
這篇文章主要介紹了ES6解構賦值(數(shù)組,對象,函數(shù))使用詳解,JavaScript 中最常用的兩種數(shù)據(jù)結構是 Object 和 Array，解構操作對那些具有很多參數(shù)和默認值等的函數(shù)也很奏效，本文通過實例代碼詳細講解需要的朋友可以參考下2022-11-11