欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果

 更新時(shí)間:2018年12月28日 16:04:53   作者:豆i漿  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果,具有一定的參考價(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)文章

最新評(píng)論