亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年08月28日 11:36:00   作者:北方的木  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

首先去圖標(biāo)庫,找一個(gè)空心星圖片和一個(gè)實(shí)星圖片

先是效果圖

代碼

wxml文件

for循環(huán)5次,初始值是5星,data-name用于區(qū)別是那個(gè)評價(jià)的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
條件判斷,圖片判斷一個(gè)是空星,一個(gè)實(shí)星,根據(jù)自己圖片地址改變

<view class="view_page">
? <view class="content_cls">
? ? <view class="cross_column" style="margin-top: 50rpx;">
? ? ? <label>總體評價(jià):</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="total" data-item="{{item}}" src="{{item-total+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>服務(wù)態(tài)度:</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="service" data-item="{{item}}" src="{{item-service+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>施工質(zhì)量:</label>
? ? ? <image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="quality" data-item="{{item}}" src="{{item-quality+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column">
? ? ? <label>維修時(shí)間:</label>
? ? ?<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="repairtime" data-item="{{item}}" src="{{item-repairtime+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
? ? </view>
? ? <view class="cross_column" style="height:120rpx;margin-top:200rpx;margin-button:10rpx">
? ? ? <button bindtap="Reasons_bind" class="but_style">需要返修</button>
? ? ? <button class="but_style">確認(rèn)評價(jià)</button>
? ? </view>
? </view>
</view>

css樣式

如果需要實(shí)現(xiàn)我這種效果可以使用

/* pages/browse/evaluatepage.wxss */
/* 列合并 */
.cross_column {
? display: flex;
? height: 70rpx;
? line-height: 70rpx;
}

/* img圖片樣式 */
.imagecls {
? width: 70rpx;
? height: 70rpx;
}
/*按鈕樣式 */

.but_style {
?background-color: #f2a8b9;
? width: 200rpx;
? height: 100rpx;
? color: white;
}
/*報(bào)修評價(jià)內(nèi)容樣式 */

.content_cls {
? width: 70%;
? margin-left: 15%;
? background-color: white;
}
.content_cls view{
? margin-bottom: 50rpx;
}

最后就是js

先是初始化評價(jià)都為5星
點(diǎn)擊星星觸發(fā)事件,獲取item和name.根據(jù)name判斷賦值
本來打算一個(gè)setData實(shí)現(xiàn)的,但是沒整出來,有整出來的朋友可以附下代碼

data: {
? ? total: 5,//總體評價(jià)
? ? service: 5,//服務(wù)態(tài)度
? ? quality: 5,//施工質(zhì)量
? ? repairtime: 5//維修時(shí)間
? },
? img_bind: function(event) {
? ? var id = event.currentTarget.dataset.item + 1;
? ? var variable = event.currentTarget.dataset.name;
? ? console.log(id)
? ? console.log(variable)
? ? if (variable == "total")
? ? this.setData({
? ? ? total: id,
? ? })
? ? else if (variable == "service")
? ? ? this.setData({
? ? ? ? service: id,
? ? ? })
? ? else if (variable == "quality")
? ? ? this.setData({
? ? ? ? quality: id,
? ? ? })
? ? else
? ? {
? ? ? this.setData({
? ? ? ? repairtime: id,
? ? ? })
? ? }
? },

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

相關(guān)文章

  • JavaScript深入介紹WebAPI的用法

    JavaScript深入介紹WebAPI的用法

    JS分成三個(gè)大的部分:ECMAScript、DOM API、BOM API,其中:ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個(gè)更加復(fù)雜的有交互式的頁面,還需要WebAPI的支持,相當(dāng)于把后端編程實(shí)現(xiàn)成前端交互。DOM+BOM就組成了WebAPI
    2022-06-06
  • javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法

    javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法

    這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • JSON基本語法及與JavaScript的異同實(shí)例分析

    JSON基本語法及與JavaScript的異同實(shí)例分析

    這篇文章主要介紹了JSON基本語法及與JavaScript的異同,結(jié)合實(shí)例形式分析了json簡單值、對象、數(shù)組三種類型值使用技巧,需要的朋友可以參考下
    2019-01-01
  • 解決遠(yuǎn)程頁面抓取中的亂碼問題?

    解決遠(yuǎn)程頁面抓取中的亂碼問題?

    解決遠(yuǎn)程頁面抓取中的亂碼問題?...
    2007-03-03
  • 前臺(tái)js改變Session的值(用ajax實(shí)現(xiàn))

    前臺(tái)js改變Session的值(用ajax實(shí)現(xiàn))

    前臺(tái)js改變Session的值,有很多的新手朋友對此問題會(huì)很陌生,本文將提供解決方法,需要了解的朋友可以參考下
    2012-12-12
  • Javascript中的async awai的用法

    Javascript中的async awai的用法

    本篇文章主要介紹了Javascript中的async/awai的用法,將分享async / await是如何工作的,有興趣的可以了解一下
    2017-05-05
  • 解決webpack打包速度慢的解決辦法匯總

    解決webpack打包速度慢的解決辦法匯總

    本篇文章主要介紹了徹底解決webpack打包慢的解決辦法匯總,詳細(xì)的介紹了3種方法,有興趣的可以了解一下
    2017-07-07
  • tree?shaking功能及使用原理詳細(xì)解析

    tree?shaking功能及使用原理詳細(xì)解析

    這篇文章主要為大家介紹了tree?shaking功能及使用原理詳細(xì)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪的相關(guān)資料
    2023-01-01
  • JavaScript生成圖形驗(yàn)證碼

    JavaScript生成圖形驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了JavaScript生成圖形驗(yàn)證碼的相關(guān)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 純JS前端實(shí)現(xiàn)分頁代碼

    純JS前端實(shí)現(xiàn)分頁代碼

    這篇文章主要介紹了純JS前端實(shí)現(xiàn)分頁代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06

最新評論