Problemhintergrund
Szenarien, die eine Bewertung erfordern, treten häufig bei der Entwicklung kleiner Programme auf, beispielsweise bei Umfragen zur Benutzerzufriedenheit. In diesem Artikel wird eine Lösung für kleine WeChat-Programme vorgestellt, mit der eine Sternebewertung erreicht werden kann.
Der Effekt ist wie folgt:
Screenshot 2
Problemanalyse
Es gibt nicht viel zu sagen, gehen Sie einfach zum Code.
(1) Der Code der Datei index.wxml lautet wie folgt:
<view class="vertical-star-item">
<view class="starts-description">
<text style="font-size: 30rpx;">很不满意</text>
<text style="font-size: 30rpx;">很满意</text>
</view>
<view class="brightStars">
<!-- answers[String(index)] -->
<image class="image-item" wx:for="{
{starsBox}}" wx:key="index" wx:for-index="index" wx:for-item="{
{item}}" data-index="{
{index}}" bindtap="changePic" src="{
{index<=answer? '../../static/img/startFull.png' : '../../static/img/star.png'}}"></image>
</view>
</view>
</view>
(2) index.js-Datei, der Code lautet wie folgt:
const rsaUtil = require('../../utils/RSAUtil')
// pages/healdata/healthydata.ts
Page({
/**
* 页面的初始数据
*/
data: {
...
starsBox: [1, 1, 1, 1, 1],
answer: -1
},
...
/**
* 评分组件选中处理
*/
changePic: function (e) {
let f = this
console.log(e.currentTarget.dataset)
var index = e.currentTarget.dataset.index
console.log(index)
f.setData({
answer: index
})
},
})
(3) index.wxss-Datei, der Code lautet wie folgt:
.vertical-star-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 70%;
}
.starts-description {
display: flex;
justify-content: space-between;
}
.brightStars{
display: flex;
flex-direction: row;
}
.image-item{
width: 50px;
height: 50px;
}
(4) Ausgewählte und nicht ausgewählte Sterne-Bilder lauten wie folgt:
Abschluss der Ausgabe
In diesem Artikel wird ein Schema für WeChat-Miniprogramme vorgestellt, mit dem eine Sternebewertung erreicht werden kann. Interessierte Studenten können sich weiter vertiefen.