微信小程序?qū)崿F(xiàn)評價(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實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JSON基本語法及與JavaScript的異同實(shí)例分析
這篇文章主要介紹了JSON基本語法及與JavaScript的異同,結(jié)合實(shí)例形式分析了json簡單值、對象、數(shù)組三種類型值使用技巧,需要的朋友可以參考下2019-01-01前臺(tái)js改變Session的值(用ajax實(shí)現(xiàn))
前臺(tái)js改變Session的值,有很多的新手朋友對此問題會(huì)很陌生,本文將提供解決方法,需要了解的朋友可以參考下2012-12-12