本文實例為大家分享了微信小程序實現日歷效果的具體代碼，供大家參考，具體內容如下

效果預覽：

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 文件全局使用下面是代碼部分

 /** * 獲取系統信息 */ sysInfo: function () { let res = wx.getSystemInfoSync(); let info = {  width: res.windowWidth,//可使用窗口寬度  height: res.windowHeight,//可使用窗口高度  system: res.system,//操作系統版本  statusBarHeight: res.statusBarHeight//狀態欄的高度 } return info; },

js代碼部分：

const app = new getApp();// page/issueEvaluate/issueEvaluate.jsPage({ /** * 頁面的初始數據 */ data: { imgW: app.sysInfo().width * 0.146,//根據屏幕寬度動態設置圖片寬度 starLen: 5,//星星評價的初始等級 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'],//星星評價的圖片資源數組 starSrc: '../../image/star2-6.png',//星星評價的初始圖片 evaluate: '非常好', evaluateArr: ['非常差', '差', '一般', '好', '比較好', '非常好'] }, moveFun: function (e) { let imgBoxW = app.sysInfo().width * 0.146 + 10;//商品圖片X軸盡頭坐標(即星星的初始坐標值) let starW = 130 / 5;//每一顆星星的寬度(用于計算星星的X軸坐標) let xAxial = e.touches[0].clientX;//獲取當前觸摸的X軸坐標 //如果當前觸摸的X軸坐標小于初始坐標則顯示為0顆星星 if (xAxial < imgBoxW) {  this.data.starLen = 0;  //如果當前觸摸的X軸坐標大于初始坐標并小于第2顆星星的初始坐標則顯示為1顆星星 } else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) {  this.data.starLen = 1;  //如果當前觸摸的X軸坐標大于第2顆星星的初始坐標并小于第3顆星星的初始坐標則顯示為2顆星星 } else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) {  this.data.starLen = 2;  //如果當前觸摸的X軸坐標大于第3顆星星的初始坐標并小于第4顆星星的初始坐標則顯示為3顆星星 } else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) {  this.data.starLen = 3;  //如果當前觸摸的X軸坐標大于第4顆星星的初始坐標并小于第5顆星星的初始坐標則顯示為4顆星星 } else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) {  this.data.starLen = 4;  //如果當前觸摸的X軸坐標大于第5顆星星初始坐標則顯示為5顆星星 } else if (xAxial > imgBoxW + (starW * 5)) {  this.data.starLen = 5; } //設置img標簽的SRC路徑 替換成對應的星星圖片 this.data.starSrc = this.data.starSrcArr[this.data.starLen]; //設置為對應的評價等級文字 this.data.evaluate = this.data.evaluateArr[this.data.starLen]; this.setData({  starSrc: this.data.starSrc,  evaluate: this.data.evaluate }); },})