微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)功能

更新時(shí)間：2022年08月28日 10:31:01 作者：遠(yuǎn)方有多遠(yuǎn)_

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

需求如圖：

1個(gè)星-很不滿意；

2個(gè)星-不滿意；

3個(gè)星-一般；

4個(gè)星-還不錯(cuò)；

5個(gè)星-很滿意；

找了demo，刪刪改改，demo地址：微信小程序?qū)崿F(xiàn)星星評(píng)價(jià)效果

需要的頁面引入：

json:

{
?? ? ?"usingComponents": {
?? ? ? ?"star": "../../components/star/star"
?? ? ?},
?? ? ?"navigationBarTitleText": "評(píng)價(jià)"
?}

wxml:

<star></star>

組件代碼：

wxml：

<!--components/star/star.wxml-->

<view class='buy' bindtap='showBuyModal'>測試版評(píng)價(jià)本次維修服務(wù)</view>

<!-- 點(diǎn)擊彈出遮罩層 -->
<view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view>
<!-- 點(diǎn)擊立即購買 彈窗 -->
<view animation="{{animationData}}" class="buy_box" wx:if="{{showModalStatus}}">
? <view class='startitle'>{{tatle}}</view>
? <!-- 星星start -->
? <view class='container'>
? ? <view class='evaluate_contant'>
? ? ? <!--外層循環(huán)控制有幾個(gè)評(píng)價(jià)條目 -->
? ? ? <block wx:for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'>
? ? ? ? <view class='evaluate_item'>
? ? ? ? ? <view class='evaluate_title'>{{staritem}}</view>
? ? ? ? ? <!--星星評(píng)價(jià) -->
? ? ? ? ? <view class='evaluate_box'>
? ? ? ? ? ? <!--內(nèi)層循環(huán)展示每個(gè)評(píng)價(jià)條目的星星 -->
? ? ? ? ? ? <block wx:for="{{stars}}" wx:key=''>
? ? ? ? ? ? ? <image class="star-image" style="left: {{item*80}}rpx" src="{{scores[idx] > item ?normalSrc:selectedSrc}}">
? ? ? ? ? ? ? ? <view class="staritem" data-score="{{item + 1}}" data-idx='{{idx}}' bindtap="selectRight"></view>
? ? ? ? ? ? ? </image>
? ? ? ? ? ? </block>
? ? ? ? ? </view>

? ? ? ? </view>
? ? ? </block>
? ? ? <view class="evaluation">{{evaluation}}</view>
? ? ? <!-- <button class='sub_button' bindtap='submit_evaluate' type='primary'>提交</button> -->
? ? </view>
? </view>
? <!-- 星星end -->
? <view class="detail-btn">
? <button class="done-person" style='border:4rpx solid #FF4A4A;background-color: #FFFFFF;font-weight: bold;color: #FF4A4A;font-size:28rpx;' bindtap='hideBuyModal' plain='{{plain}}'>取消</button>

? ? <button class="done-person" style='border:none;background-color: #FF4A4A;font-weight: bold;color: #FFFFFF;font-size:28rpx;' bindtap='submit_evaluate' plain='{{plain}}'>提交</button>

? ? <!-- <button type="primary" bindtap='hideBuyModal' class=""> 取消</button>
? ? <button type="primary" bindtap='submit_evaluate' class=""> 確定 </button> -->
? </view>
</view>

js:

// components/star/star.js

Component({
? /**
? ?* 組件的屬性列表
? ?*/
? properties: {

? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? showModalStatus: false,
? ? tatle: "您對(duì)這次服務(wù)的評(píng)價(jià)",
? ? // 星星
? ? evaluate_contant: ['一', ],
? ? stars: [0, 1, 2, 3, 4],
? ? normalSrc: '../../image/star_gray.png',
? ? selectedSrc: '../../image/star_red.png',
? ? score: 0,
? ? scores: [0],
? ? evaluation:'　　',
? ? plain:true
? },

? /**
? ?* 組件的方法列表
? ?*/
? methods: {

? ? // 星星顆數(shù)start
? ? // 提交事件
? ? submit_evaluate: function() {
? ? ? console.log('評(píng)價(jià)得分' + this.data.scores)
? ? },
? ? //點(diǎn)擊星
? ? selectRight: function(e) {
? ? ? var score = e.currentTarget.dataset.score
? ? ? console.log(score)
? ? ? this.data.scores[e.currentTarget.dataset.idx] = score

? ? ? let evaluation = score == 1 ? '很不滿意' : (score == 2 ? '不滿意' : (score == 3 ? '一般' : (score == 4 ? '還不錯(cuò)' : (score == 5 ? '很滿意' : ''))))

? ? ? this.setData({
? ? ? ? scores: this.data.scores,
? ? ? ? score: score,
? ? ? ? evaluation: evaluation
? ? ? })
? ? },
? ? // 星星顆數(shù)end
? ? // onLoad: function (options) {
? ? // ? console.log(options.id)
? ? // },
? ? showBuyModal() {
? ? ? // 顯示遮罩層
? ? ? var animation = wx.createAnimation({
? ? ? ? duration: 200,
? ? ? ? /**
? ? ? ? ?* http://cubic-bezier.com/?
? ? ? ? ?* linear 動(dòng)畫一直較為均勻
? ? ? ? ?* ease 從勻速到加速在到勻速
? ? ? ? ?* ease-in 緩慢到勻速
? ? ? ? ?* ease-in-out 從緩慢到勻速再到緩慢
? ? ? ? ?*?
? ? ? ? ?* http://www.tuicool.com/articles/neqMVr
? ? ? ? ?* step-start 動(dòng)畫一開始就跳到 100% 直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過
? ? ? ? ?* step-end 保持 0% 的樣式直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過
? ? ? ? ?*/
? ? ? ? timingFunction: "ease",
? ? ? ? delay: 0
? ? ? })
? ? ? this.animation = animation
? ? ? animation.translateY(300).step()
? ? ? this.setData({
? ? ? ? animationData: animation.export(), // export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作。
? ? ? ? showModalStatus: true
? ? ? })
? ? ? setTimeout(() => {
? ? ? ? animation.translateY(0).step()
? ? ? ? this.setData({
? ? ? ? ? animationData: animation.export() // export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作。
? ? ? ? })
? ? ? ??
? ? ? }, 200)
? ? },

? ? hideBuyModal() {
? ? ? // 隱藏遮罩層
? ? ? var animation = wx.createAnimation({
? ? ? ? duration: 200,
? ? ? ? timingFunction: "ease",
? ? ? ? delay: 0
? ? ? })
? ? ? this.animation = animation
? ? ? animation.translateY(300).step()
? ? ? this.setData({
? ? ? ? animationData: animation.export(),
? ? ? })
? ? ? setTimeout(function() {
? ? ? ? animation.translateY(0).step()
? ? ? ? this.setData({
? ? ? ? ? animationData: animation.export(),
? ? ? ? ? showModalStatus: false
? ? ? ? })
? ? ? ? // console.log(this)
? ? ? }.bind(this), 200)
? ? }


? }
})

wxss:

/* components/star/star.wxss */

.buy{
? margin-top: 200rpx;
? text-align: center;
}
.cover_screen {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? background: #000;
? opacity: 0.2;
? overflow: hidden;
? z-index: 1000;
? color: #fff;
}
.buy_box {
? width: 100%;
? box-sizing: border-box;
? position: fixed;
? bottom: 0;
? left: 0;
? z-index: 2000;
? background: #fff;
? padding: 20rpx;
? overflow: hidden;
}
.buy_box .startitle {
? ? font-size: 28rpx;
? ? text-align: center;
? ? line-height: 40rpx;
? ? color: #333;
? ? padding: 20rpx 0;
}
/* 星星 */
.footer_end{
? display: flex
}
.footer_end button{
? width: 30%;
}
/* 插入星星 */
/*評(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: "../../image/star_gray.png";
}

/* 評(píng)價(jià)對(duì)應(yīng)內(nèi)容 */
.evaluation{
? text-align: center;
? margin: 30rpx 0 40rpx;
? color: #535353;
}
?
/*星星區(qū)域 */
.container .evaluate_contant .evaluate_item .evaluate_box .star-image .staritem {
?position: absolute;
?top: 0rpx;
?left: 0rpx;
?width: 40rpx;
?height: 40rpx;
}
?
/*按鈕 */
.container .evaluate_contant .sub_button {
?height: 60rpx;
?font-size: 30rpx;
?line-height: 60rpx;
?margin: 20rpx;
}


.detail-btn{
? width: 750rpx;
? display: flex;
? justify-content: space-around;
? align-items: center;
? margin-bottom: 100rpx;
}
.done-person{
? width:220rpx;
? height:72rpx;
? border-radius:36rpx;
}

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

您可能感興趣的文章: