日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

怎么在微信小程序中實(shí)現(xiàn)星星評(píng)價(jià)效果？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)專注于大埔網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供大埔營(yíng)銷型網(wǎng)站建設(shè)，大埔網(wǎng)站制作、大埔網(wǎng)頁(yè)設(shè)計(jì)、大埔網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造大埔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供大埔網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

wxml文件

 
 
 
 
  {{item}}

  
  
  
  
   item ?(scores[idx]-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
  
  
  
  
  

 
 
 提交
 

js文件

Page({

 data: {
 evaluate_contant: ['評(píng)價(jià)條目一', '評(píng)價(jià)條目二', '評(píng)價(jià)條目三',],
 stars: [0, 1, 2, 3, 4],
 normalSrc: '../../images/no-star.png',
 selectedSrc: '../../images/full-star.png',
 halfSrc: '../../images/half-star.png',
 score: 0,
 scores: [0, 0, 0],
 },

 // 提交事件
 submit_evaluate: function () {
 console.log('評(píng)價(jià)得分' + this.data.scores)
 },

 //點(diǎn)擊左邊,半顆星
 selectLeft: function (e) {
 var score = e.currentTarget.dataset.score
 if (this.data.score == 0.5 && e.currentTarget.dataset.score == 0.5) {
 score = 0;
 }

 this.data.scores[e.currentTarget.dataset.idx] = score,
 this.setData({
 scores: this.data.scores,
 score: score
 })

 },

 //點(diǎn)擊右邊,整顆星
 selectRight: function (e) {
 var score = e.currentTarget.dataset.score

 this.data.scores[e.currentTarget.dataset.idx] = score,
 this.setData({
 scores: this.data.scores,
 score: score
 })
 }
})

wxss

/*評(píng)價(jià)區(qū)域 */
.container .evaluate_contant .evaluate_item {
 font-size: 30rpx;
 color: gray;
 margin-left: 20rpx;
 margin-top: 30rpx;
}

/*評(píng)價(jià)標(biāo)題 */
.container .evaluate_contant .evaluate_item .evaluate_title {
 display: inline-block;
}

/*評(píng)價(jià)盒子 */
.container .evaluate_contant .evaluate_item .evaluate_box {
 position: absolute;
 left: 220rpx;
 width: 100%;
 display: inline-block;
}

/*星星評(píng)價(jià)的每個(gè)圖片 */
.container .evaluate_contant .evaluate_item .evaluate_box .star-image {
 position: absolute;
 width: 40rpx;
 height: 40rpx;
 src: "../../images/no-star.png";
}

/*星星的左邊和右邊區(qū)域<點(diǎn)擊左邊半個(gè)星星，點(diǎn)擊右邊整個(gè)星星> */
.container .evaluate_contant .evaluate_item .evaluate_box .star-image .item {
 position: absolute;
 top: 0rpx;
 width: 20rpx;
 height: 40rpx;
}

/*按鈕 */
.container .evaluate_contant .submit_button {
 height: 60rpx;
 font-size: 30rpx;
 line-height: 60rpx;
 margin: 20rpx;
}

關(guān)于怎么在微信小程序中實(shí)現(xiàn)星星評(píng)價(jià)效果問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

當(dāng)前名稱：怎么在微信小程序中實(shí)現(xiàn)星星評(píng)價(jià)效果
URL標(biāo)題：http://www.dlmjj.cn/article/jhhdss.html