南京小程序开发公司将在本文中，给出了一个例子来分享微信applet的具体代码来实现日历效果。供您参考，详情如下。
效果预览：
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 > commodity name </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;
}
应用。sysInfo（）封装在app中。JS文件供全球使用。这是代码部分
/**
* Getting System Information
*/
sysInfo: function () {
let res = wx.getSystemInfoSync();
let info = {
Width: res. Windows Width, // Available Window Width
Height: res. windows Height, // usable window height
System: res. system, // OS version
StatusBarHeight: res.statusBarHeight// Height of the status bar
}
return info;
},
JS代码部分：
const app = new getApp();
// page/issueEvaluate/issueEvaluate.js
Page({
/**
* Initial data of pages
*/
data: {
ImgW: app. sysInfo (). width * 0.146, /// Set the image width dynamically according to the screen width
StarLen: 5, // Star Evaluation Initial Level
StarSrcArr: ['. /.. / image / star2-1. png','. /. / image / star2-2. png','.. /. / image / star2-3. png','. /. / image / star2-4. png','. /. / image / star2-4. png','. /. / image / star2-5. png','. /.. / image / star2-6. png', //star evaluation image resource array
StarSrc:'. /. / image / star2-6. png', // initial picture of star evaluation
Evaluate:'Very good',
EvaluateArr: ['Very bad','poor','average','good','better','Very good']
},
moveFun: function (e) {
Let imgBoxW = app. sysInfo (). width * 0.146 + 10; // end coordinates of X axis of commodity picture (i.e. initial coordinate values of stars)
Let starW = 130/5; // The width of each star (used to calculate the X-axis coordinates of stars)
Let xAxial = e.touches [0]. clientX; // Get the X-axis coordinates of the current touch
// If the X-axis coordinate of the current touch is less than the initial coordinate, it will be displayed as 0 stars.
if (xAxial < imgBoxW) {
this.data.starLen = 0;
// If the X-axis coordinate of the current touch is larger than the initial coordinate and smaller than the initial coordinate of the second star, it is shown as a star.
} else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) {
this.data.starLen = 1;
// If the X-axis coordinate of the current touch is greater than the initial coordinate of the second star and less than the initial coordinate of the third star, it is shown as two stars.
} else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) {
this.data.starLen = 2;
// If the X-axis coordinate of the current touch is greater than the initial coordinate of the third star and less than the initial coordinate of the fourth star, it is shown as three stars.
} else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) {
this.data.starLen = 3;
// If the X-axis coordinate of the current touch is greater than the initial coordinate of the fourth star and less than the initial coordinate of the fifth star, it is shown as four stars.
} else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) {
this.data.starLen = 4;
// If the X-axis coordinate of the current touch is greater than the initial coordinate of the fifth star, it will be displayed as five stars.
} else if (xAxial > imgBoxW + (starW * 5)) {
this.data.starLen = 5;
}
// Substitute the SRC path with the IMG tag to the corresponding star image
this.data.starSrc = this.data.starSrcArr[this.data.starLen];
// Set to the corresponding evaluation level text
this.data.evaluate = this.data.evaluateArr[this.data.starLen];
this.setData({
starSrc: this.data.starSrc,
evaluate: this.data.evaluate
});
},
})
以上是本文的全部内容。我希望它对每个人的学习都有所帮助，我希望你能更多地支持南京小程序开发公司我们。
本文地址：
http://www.njanyou.cn/web/2500.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
南京小程序开发说说微信小程序中时间控制选择器视图的详细用法
下一篇：
使用面包屑导航改善用户体验的方法
