微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果的具體代碼,供大家參考,具體內(nèi)容如下
效果預(yù)覽:
wxml代碼部分:
<view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> </view> <view class='topRight'> <view class='r_top'> <text>商品名稱</text> <text>{{ evaluate }}</text> </view> <view class='r_bottom' catchtouchmove='moveFun' catchtouchstart='moveFun'> <image src='{{ starSrc }}'></image> </view> </view> </view>
wxss代碼部分:
.topMaxBox{ padding: 5%; display: flex; flex-direction: row; } .topLeft{ border: 1px solid #e5e5e5; margin-right: 10px; } .topLeft image{ width: 100%; height: 100%; } .topRight{ flex: 1; display: flex; flex-direction: column; justify-content: center; } .r_top{ display: flex; justify-content: space-between; margin-bottom: 2%; } .r_bottom image{ width: 130px; height: 18px; }
app.sysInfo()封裝在了app.js 文件全局使用下面是代碼部分
/** * 獲取系統(tǒng)信息 */ sysInfo: function () { let res = wx.getSystemInfoSync(); let info = { width: res.windowWidth,//可使用窗口寬度 height: res.windowHeight,//可使用窗口高度 system: res.system,//操作系統(tǒng)版本 statusBarHeight: res.statusBarHeight//狀態(tài)欄的高度 } return info; },
js代碼部分:
const app = new getApp(); // page/issueEvaluate/issueEvaluate.js Page({ /** * 頁面的初始數(shù)據(jù) */ data: { imgW: app.sysInfo().width * 0.146,//根據(jù)屏幕寬度動(dòng)態(tài)設(shè)置圖片寬度 starLen: 5,//星星評(píng)價(jià)的初始等級(jí) starSrcArr: ['../../image/star2-1.png', '../../image/star2-2.png', '../../image/star2-3.png', '../../image/star2-4.png', '../../image/star2-5.png', '../../image/star2-6.png'],//星星評(píng)價(jià)的圖片資源數(shù)組 starSrc: '../../image/star2-6.png',//星星評(píng)價(jià)的初始圖片 evaluate: '非常好', evaluateArr: ['非常差', '差', '一般', '好', '比較好', '非常好'] }, moveFun: function (e) { let imgBoxW = app.sysInfo().width * 0.146 + 10;//商品圖片X軸盡頭坐標(biāo)(即星星的初始坐標(biāo)值) let starW = 130 / 5;//每一顆星星的寬度(用于計(jì)算星星的X軸坐標(biāo)) let xAxial = e.touches[0].clientX;//獲取當(dāng)前觸摸的X軸坐標(biāo) //如果當(dāng)前觸摸的X軸坐標(biāo)小于初始坐標(biāo)則顯示為0顆星星 if (xAxial < imgBoxW) { this.data.starLen = 0; //如果當(dāng)前觸摸的X軸坐標(biāo)大于初始坐標(biāo)并小于第2顆星星的初始坐標(biāo)則顯示為1顆星星 } else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) { this.data.starLen = 1; //如果當(dāng)前觸摸的X軸坐標(biāo)大于第2顆星星的初始坐標(biāo)并小于第3顆星星的初始坐標(biāo)則顯示為2顆星星 } else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) { this.data.starLen = 2; //如果當(dāng)前觸摸的X軸坐標(biāo)大于第3顆星星的初始坐標(biāo)并小于第4顆星星的初始坐標(biāo)則顯示為3顆星星 } else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) { this.data.starLen = 3; //如果當(dāng)前觸摸的X軸坐標(biāo)大于第4顆星星的初始坐標(biāo)并小于第5顆星星的初始坐標(biāo)則顯示為4顆星星 } else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) { this.data.starLen = 4; //如果當(dāng)前觸摸的X軸坐標(biāo)大于第5顆星星初始坐標(biāo)則顯示為5顆星星 } else if (xAxial > imgBoxW + (starW * 5)) { this.data.starLen = 5; } //設(shè)置img標(biāo)簽的SRC路徑 替換成對(duì)應(yīng)的星星圖片 this.data.starSrc = this.data.starSrcArr[this.data.starLen]; //設(shè)置為對(duì)應(yīng)的評(píng)價(jià)等級(jí)文字 this.data.evaluate = this.data.evaluateArr[this.data.starLen]; this.setData({ starSrc: this.data.starSrc, evaluate: this.data.evaluate }); }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開動(dòng)畫效果,可實(shí)現(xiàn)類似百度頁面分享按鈕一樣的折疊展開動(dòng)畫效果,涉及javascript頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04JavaScript實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間通信,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04JS實(shí)現(xiàn)電話號(hào)碼的字母組合算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)電話號(hào)碼的字母組合算法,結(jié)合實(shí)例形式分析了javascript組合運(yùn)算的相關(guān)算法原理與操作技巧,需要的朋友可以參考下2019-02-02JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型,用于表示一個(gè)獨(dú)一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用,需要的可以參考一下2022-09-09JavaScript函數(shù)及其prototype詳解
這篇文章主要介紹了JavaScript函數(shù)及其prototype詳解的相關(guān)資料,需要的朋友可以參考下2023-03-03JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09extjs簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了extjs簡(jiǎn)介,ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件,具有統(tǒng)一的主題,便于快速開發(fā),提高效率2017-07-07淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結(jié)的關(guān)于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-03-03