<del id="d4fwx"><form id="d4fwx"></form></del>
      <del id="d4fwx"><form id="d4fwx"></form></del><del id="d4fwx"><form id="d4fwx"></form></del>
      

          

            <code id="d4fwx"><abbr id="d4fwx"></abbr></code>
            • 

            
    

            



            

    
            
        
            
            
            微信小程序：制作星星評價代碼分享
            
            
            2023-02-20    分類：
                                    微信小程序               
            
        
            
        
            
			
            不管是商城、O2O等類型的小程序都需要用到評價，而星星評價是最常用的類型，創(chuàng)新互聯(lián)今天分享平時在項目制作中如何實現(xiàn)星星評價。
            提交評價
            上圖是評價后的結果，主要分為三項評價，平均得出綜合評價，那么就需要用戶選擇三項星星評價,如下圖
            實現(xiàn)的要點是如何通過點擊星星自動實現(xiàn)評價效果，如點擊第三顆星星就自動變成3星。

            WXML代碼如下
            <view class="container">
            <view class="comment_box">
            <form bindsubmit="add_comment" report-submit="true">
            <view class="comment_item">
            <view class="comment_item_t">服務態(tài)度得分view>
            <view class="comment_item_star">
            <view class="star {{star_1>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="1" >view>
            <view class="star {{star_1>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="2">view>
            <view class="star {{star_1>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="3">view>
            <view class="star {{star_1>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="4">view>
            <view class="star {{star_1>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="5">view>
            view>
            view>
            <view class="comment_item">
            <view class="comment_item_t">服務質(zhì)量得分view>
            <view class="comment_item_star">
            <view class="star {{star_2>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="1">view>
            <view class="star {{star_2>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="2">view>
            <view class="star {{star_2>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="3">view>
            <view class="star {{star_2>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="4">view>
            <view class="star {{star_2>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="5">view>
            view>
            view>
            <view class="comment_item">
            <view class="comment_item_t">服務效率得分view>
            <view class="comment_item_star">
            <view class="star {{star_3>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="1">view>
            <view class="star {{star_3>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="2">view>
            <view class="star {{star_3>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="3">view>
            <view class="star {{star_3>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="4">view>
            <view class="star {{star_3>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="5">view>
            view>
            view>
            <view class="comment_text">
            <textarea name='detail' placeholder='輸入評價內(nèi)容'>textarea>
            view>
            <view class="btn">
            <button form-type="submit">確定提交button>
            view>
            form>
            view>
            view>
            WXSS代碼如下：
            .container {
            background: #f0f0f0;
            }
            .comment_box{
            width:100%;
            }
            .comment_item{
            width:100%;
            padding:0 20rpx;
            height:100rpx;
            line-height:100rpx;
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            box-sizing:border-box;
            border-bottom:1px dotted #eee;
            background-color:#fff;
            }
            .comment_item_t{
            font-size:32rpx;
            height:100rpx;
            line-height:100rpx;
            color: #333333;
            }
            .comment_item_star{
            display:flex;
            flex-direction:row;
            }
            .comment_item_star .star{
            z-index: 1;
            width:80rpx;
            height:100rpx;
            background-image: url("亮色星星圖片");
            background-size:20px 19px;
            background-position:center center;
            background-repeat:no-repeat;
            }
            .comment_item_star .star_gray{
            background-image: url("灰色星星圖片");
            }
            .comment_text textarea{
            width:100%;
            height:256rpx;
            font-size:32rpx;
            line-height:64rpx;
            color: #333333;
            background: #fff;
            padding:20rpx;
            box-sizing:border-box;
            }
            .btn button{
            width: 670rpx;
            height: 90rpx;
            line-height:90rpx;
            background: #ffda44;
            border-radius: 45rpx;
            font-size: 32rpx;
            margin: 40rpx 40rpx 60rpx 40rpx;
            color: #333;
            }

            JS代碼如下

            var util = require('../../utils/util.js')
            var app = getApp()//獲取應用實例
            Page({
            data: {
            star_1: 0,
            star_2: 0,
            star_3: 0,
            order_id:0
            },
            onLoad:function(e) {
            var that = this
            var order_id = e.order_id
            that.setData({
            order_id:order_id
            })
            },
            change_star:function(e) {
            var that = this
            var star_item = e.currentTarget.dataset.item
            var star = e.currentTarget.dataset.star
            if (star_item == 'star_1') {
            that.setData({
            star_1: star
            });
            }else if(star_item == 'star_2') {
            that.setData({
            star_2: star
            });
            } else if (star_item == 'star_3') {
            that.setData({
            star_3: star
            });
            }
            },
            add_comment:function(e) {
            var that = this
            var star_1 = that.data.star_1
            var star_2 = that.data.star_2
            var star_3 = that.data.star_3
            var detail = e.detail.value.detail
            if(star_1 == 0) {
            util.showNotice("請針對服務態(tài)度打分!")
            } else if (star_2 == 0) {
            util.showNotice("請針對服務質(zhì)量打分!")
            } else if (star_3 == 0) {
            util.showNotice("請針對服務效率打分!")
            } else if (detail == "") {
            util.showNotice("請?zhí)顚懺u價內(nèi)容!")
            } else {
            var order_id = that.data.order_id
            var session3rd = wx.getStorageSync('session3rd')
            var post_data = {
            "session3rd": session3rd,
            "order_id": order_id,
            "star_1": star_1,
            "star_2": star_2,
            "star_3": star_3,
            "detail": detail,
            "ctype": 1
            }
            var url_comment = util.getApiUrl(app, "/Comment/add", "")
            util._post_from(url_comment, post_data, function (res) {
            console.log('評價俠客返回')
            console.log(res)
            if (res.data.code = '200') {
            wx.showModal({
            content: '提交評論成功',
            showCancel:false,
            success:function(val) {
            app.globalData.is_need_update_post_info = true
            wx.navigateBack()
            }
            })
            } else {
            util.showNotice(res.data.msg)
            }
            })
            }
            }
            })


            以上基本就實現(xiàn)了星星評價效果。
                        
            
                新聞名稱：微信小程序：制作星星評價代碼分享
                
            
                文章起源：http://www.jbt999.com/news5/238305.html
            
            
            
            
                網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有微信小程序等
                                
            
            
            
                廣告
                
            
            
            
            
                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)
            
            
        
            
        
    
            

    
            
        h5響應式網(wǎng)站建設
        
        
    
            

            





              

              <del id="d4fwx"><form id="d4fwx"></form></del>
              

              <del id="d4fwx"><form id="d4fwx"></form></del><del id="d4fwx"><form id="d4fwx"></form></del>
              

                  

                    <code id="d4fwx"><abbr id="d4fwx"></abbr></code>
                    • 

亚洲性爱AV网站
|
爱爱视频在线看
|
99热综合在线
|
人妻在线导航
|
免费看日韩特级毛片
|