uni-app+iconfont实现星级评分（vue）
效果图
需求
点击星星进⾏评分，若评分低于三星，则展⽰问题原因，星级评分多少则⾼亮⼏颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。flutter uniapp 哪个好
因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成⼀个组件，这⾥就主要记录星星评分组件的实现。
1. uni-app
是⼀个使⽤ Vue.js 开发跨平台应⽤的前端框架，开发者编写⼀套代码，可编译到iOS、Android、H5、⼩程序等多个平台。
这⾥不多做赘述，开发的⽅法基本同VUE，安装及使⽤可查看官⽹教程。
因此需求主要应⽤于⼿机浏览器，⼿机浏览器的标题栏和uni-app的标题栏重复，因此这⾥将uni-app默认的浏览器隐藏。
//pages.json
"style":{
"navigationStyle":"custom"//单个取消导航栏
},
"globalStyle":{
"navigationStyle":"custom"//全局取消导航栏
}
2. iconfont
uni-app的iconfont引⼊，⽬前只能成功引⼊Unicode格式，也就导致之后的开发不能通过动态绑定class实现。
iconfont Unicode引⼊⽅法
将选择好的图标添加⾄项⽬
拷贝项⽬下⾯⽣成的font-face
在项⽬中新建.css⽂件，将⽣成的font-face复制添加进去
url地址前添加 https:
定义使⽤iconfont的样式
挑选相应图标并获取字体编码，应⽤于页⾯
@font-face {
font-family:'iconfont';
src:url('at.alicdn/t/font_');
src:url('at.alicdn/t/font_?#iefix')format('embedded-opentype'), url('at.alicdn/t/font_1254062_cqoky071dbi.woff2')format('woff2'),
url('at.alicdn/t/font_1254062_cqoky071dbi.woff')format('woff'),
url('at.alicdn/t/font_f')format('truetype'),
url('at.alicdn/t/font_1254062_cqoky071dbi.svg#font_family')format('svg');
}
.iconfont{//与上⽅font-family 保持⼀致
font-family:"iconfont"!important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing: grayscale;
}
3. 星星组件部分
<template  name="stars">
<view class="uni-padding-wrap uni-common-mt star">
<view class="uni-flex uni-row">
<view :class="{starActive:item}"@click="choise(index)"class="flex-item iconfont"v-for="(item,index) in clicked_list">
<view v-if="item"class="starIcon">
</view>
<view v-else class="starIcon">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
props:{
},
data(){
return{
clicked_list:[false,false,false,false,false]//对应星星个数
}
},
methods:{
/
/starIcon
starIcon(item){
if(item){
return''
}else{
return''
}
},
//点击选择
choise(num){
// num 为点击的星星在数组中的下标
this.clicked_list=[false,false,false,false,false];
num=num+1;
for(let i=0; i < num ; i++){
this.clicked_list[i]=true;
}
//将分数传给⽗组件
this.$emit('getScore',num)
}
},
}
</script>
<style lang="less">
.star.uni-common-mt{
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding: 0 85upx;
margin-top: 20upx;
.flex-item{
display: inline-block;
width: 20%;
color: #999;
.
starIcon{
font-size: 52upx;
}
}
.starActive{
color: #ff8000;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。