微信小程序开发实现星星评分组件
问题背景
小程序开发中经常会碰到需要评分的场景,比如用户满意度调查等,本文介绍微信小程序实现打星评分的一种方案。
实现效果如下:
截图2
问题分析
话不多说,直接上代码。 (1)index.wxml文件代码如下:
<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文件,代码如下:
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文件,代码如下:
.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)星星选中和未选中图片如下:
问题总结
本文介绍了微信小程序实现打星评分的一种方案,有兴趣的同学可以进一步深入研究。
标签:flex,index,评分,微信,程序开发,组件,display From: https://blog.51cto.com/baorant24/6523501