欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示

 更新時(shí)間:2018年07月05日 16:02:06   作者:a_靖  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示的具體代碼,供大家參考,具體內(nèi)容如下

星級(jí)評(píng)分分成兩種情況: 一:展示后臺(tái)給的評(píng)分?jǐn)?shù)據(jù)   二:用戶點(diǎn)擊第幾顆星星就顯示為幾星評(píng)分;

直接上代碼

wxml部分

<view>
 <view>一:顯示后臺(tái)給的評(píng)分</view>
 <block wx:for="{{one_1}}" wx:key="item">
 <image src='../../image/star.png'></image>
 </block>
 <block wx:for="{{two_1}}" wx:key="item">
 <image src='../../image/starg.png'></image>
 </block>
</view>
<view>這里num給的是幾分就顯示幾顆星星</view>
 
<view style='margin-top:60px;'>二:顯示用戶選擇的評(píng)分</view>
<block wx:for="{{one_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='star' src='../../image/star.png'></image>
</block>
<block wx:for="{{two_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='starg' src='../../image/starg.png'></image>
</block>
<view>{{one_2}}星</view>

wxss部分

image{ 
 height: 60rpx; 
 width: 60rpx; 
 display: inline-block 
} 

js部分

/**
 * 頁(yè)面的初始數(shù)據(jù)
 * 滿分為5星
 */
 data: {
 num: 4,//后端給的分?jǐn)?shù),顯示的星星
 one_1: '',//點(diǎn)亮的星星數(shù)
 two_1: '',//沒有點(diǎn)亮的星星數(shù)
 one_2: 0,//點(diǎn)亮的星星數(shù)
 two_2: 5//沒有點(diǎn)亮的星星數(shù)
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 */
 onLoad: function (options) {
 //情況一:展示后臺(tái)給的評(píng)分 
 this.setData({
 one_1: this.data.num,
 two_1: 5 - this.data.num
 })
 },
 in_xin: function (e) {
 var in_xin = e.currentTarget.dataset.in;
 console.log(e.currentTarget.dataset.in);
 console.log(e.currentTarget); 
 var one_2;
 if (in_xin == 'star') {
 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
 })
 },

starg是灰色的星星,star是點(diǎn)亮的星星。if判斷那里:如果點(diǎn)擊的是點(diǎn)亮的星星的話,點(diǎn)亮星星的個(gè)數(shù)就是點(diǎn)的這個(gè)ID。如果點(diǎn)的是灰色星星的話,點(diǎn)亮星星的個(gè)數(shù)就是點(diǎn)的這個(gè)ID加上已點(diǎn)的個(gè)數(shù)。而ID就是星星的個(gè)數(shù)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • ES6中l(wèi)et 和 const 的新特性

    ES6中l(wèi)et 和 const 的新特性

    這篇文章主要介紹了ES6中l(wèi)et 和 const 的新特性,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-09-09
  • 使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法

    使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法

    這篇文章主要介紹了使用js實(shí)現(xiàn)單鏈解決前端隊(duì)列問題的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 解決jquery插件沖突的問題

    解決jquery插件沖突的問題

    本篇文章主要是對(duì)解決jquery插件沖突的方法進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • Javascript 一些需要注意的細(xì)節(jié)(必看篇)

    Javascript 一些需要注意的細(xì)節(jié)(必看篇)

    下面小編就為大家?guī)?lái)一篇Javascript 一些需要注意的細(xì)節(jié)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-07-07
  • Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果

    Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果

    這篇文章主要為大家詳細(xì)介紹了Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果,點(diǎn)擊登錄和注冊(cè)可以實(shí)現(xiàn)任意切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Grid得到選擇行數(shù)據(jù)的方法總結(jié)

    Grid得到選擇行數(shù)據(jù)的方法總結(jié)

    Grid得到選擇行數(shù)據(jù)的方法總結(jié),需要的朋友可以參考下。
    2011-01-01
  • Postman環(huán)境變量全局變量使用方法詳解

    Postman環(huán)境變量全局變量使用方法詳解

    這篇文章主要介紹了Postman環(huán)境變量全局變量使用方法詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-08-08
  • JavaScript中ES6字符串?dāng)U展方法

    JavaScript中ES6字符串?dāng)U展方法

    這篇文章主要介紹了JavaScript中ES6字符串?dāng)U展方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧
    2016-08-08
  • javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼

    javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼

    這篇文章主要介紹了javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • 使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效

    使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效

    這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效的方法,需要的朋友可以參考下
    2015-01-01

最新評(píng)論