效果图：
1.自定义的组件StarsRating.vue文件
<template name=”StarsRating”>
<view class=”stars”>
<image @click=”btnStars1″ class=”starsicon” :src=”starsObject[0]” mode=”widthFix”></image>
<image @click=”btnStars2″ class=”starsicon” :src=”starsObject[1]” mode=”widthFix”></image>
<image @click=”btnStars3″ class=”starsicon” :src=”starsObject[2]” mode=”widthFix”></image>
<image @click=”btnStars4″ class=”starsicon” :src=”starsObject[3]” mode=”widthFix”></image>
<image @click=”btnStars5″ class=”starsicon” :src=”starsObject[4]” mode=”widthFix”></image>
<text class=”txt-stars”>{{starsIndex}}.0</text>
</view>
</template>
<script>
export default {
name: “StarsRating”,
data() {
return {
};
},
props: {
starsIndex: {}, // 星级评价分数
isEditStars: {}, // 是否编辑星级评价分数
starsObject: {} // 数组
},
methods: {
btnStars1: function() {
var _this = this
console.log(“btnStars1 = ” + _this.isEditStars)
if (_this.isEditStars) {
_this.$emit(“starsClick”, 1)
}
},
btnStars2: function() {
var _this = this
if (_this.isEditStars) {
_this.$emit(“starsClick”, 2)
}
},
btnStars3: function() {
var _this = this
if (_this.isEditStars) {
_this.$emit(“starsClick”, 3)
}
},
btnStars4: function() {
var _this = this
if (_this.isEditStars) {
_this.$emit(“starsClick”, 4)
}
},
btnStars5: function() {
var _this = this
if (_this.isEditStars) {
_this.$emit(“starsClick”, 5)
}
},
}
}
</script>
<style>
.txt-stars {
color: #ff9900;
font-size: 30rpx;
margin-left: 25rpx;
}
.starsicon {
width: 56rpx;
height: 56rpx;
margin-left: 10rpx;
}
.stars {
display: flex;
flex-direction: row;
align-items: center;
}
</style>
2.页面
<template>
<view class=”content”>
<!– 自定义星级评价组件 isEditStars：是否可以编辑星级评价分数 starsClick：子组件点击事件的回调–>
<starsRating :starsIndex=”starsIndex” :starsObject=”clicked_list” :isEditStars=”true” @starsClick=”starsClick”>
</starsRating>
</view>
</template>
<script>
import starsRating from “../../components/StarsRating.vue”
export default {
components: {
starsRating
},
data() {
return {
// clicked_list
starsIndex: 0, // 默认星级评价分数
clicked_list: {} //星级评价图标数组
}
},
onLoad() {
var _this = this
_this.curShowStars(_this.starsIndex)
},
methods: {
starsClick: function(starsNum) {
var _this = this
_this.starsIndex = starsNum
_this.curShowStars(starsNum)
},
// 星星评价展示
curShowStars: function(starsNum) {
var _this = this
if (starsNum == 1) {
_this.clicked_list = [
“../../static/stars_selected.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”
]
} else if (starsNum == 2) {
_this.clicked_list = [
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_defalt.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”
]
} else if (starsNum == 3) {
_this.clicked_list = [
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_selected.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”
]
} else if (starsNum == 4) {
_this.clicked_list = [
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_defalt.png”
]
} else if (starsNum == 5) {
_this.clicked_list = [
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_selected.png”, “../../static/stars_selected.png”,
“../../static/stars_selected.png”
]
} else {
_this.clicked_list = [
“../../static/stars_defalt.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”, “../../static/stars_defalt.png”,
“../../static/stars_defalt.png”
]
_this.starsIndex = 0
}
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
page {
height: 100%;
background-color: #FFFFFF;
}
</style>
3.星星图标放置位置：
图标，大家可以保存下来也可以自己去替换
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119142.html
