uni-app+iconfont 实现星级评分（vue）

效果图

需求

点击星星进行评分，若评分低于三星，则展示问题原因，星级评分多少则高亮几颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。

因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成一个组件，这里就主要记录星星评分组件的实现。

1. uni-app

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('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot');src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot?#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff2') format('woff2'),url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff') format('woff'),url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.ttf') format('truetype'),url('https://at.alicdn.com/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">&#xe601;</view><view v-else class="starIcon">&#xe602;</view></view></view></view></view>
</template><script>export default {props:{},data() {return {clicked_list:[false,false,false,false,false] //对应星星个数}},methods: {//starIconstarIcon(item){if(item){return  '&#xe601;'}else{return  '&#xe602;'}},//点击选择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>

uni-app+iconfont 实现星级评分（vue）相关推荐

Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
基于Vue的星级评分
年前的一个项目中做到一个星级评分功能,以前都是用jquery.raty.js这款插件来做的,这个插件确实封装的很方便也很好用,但是毕竟是一个函数库(考虑各种适配,健壮,可扩展),代码行数还是有一点的, ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
UI组件之ProgressBar及其子类（二）SeekBar拖动条和RatingBar星级评分条的使用
拖动条采用拖动滑块的位置来表示数值 SeekBar的常用xml属性值: 重要的android:thumb制定一个Drawable对象,改变滑块外观通过滑块来改变图片的透明度: main.xml &l ...
星星评价控件android开发_android自定义星级评分控件，可实现只显示实心星星
话不多说,上图近日app需求弄一个等级展示,看了下UI图,只显示实星(点亮的星星).如图但是网上关于星级评分的例子大多这样也展示虚心星星通过自定义Viewpackage com.starsba ...
Angular 星级评分组件
一.需求演变及描述: 1. 有一个"客户对公司的总体评价"的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5 ...
android自定义控件（星级评分）
一.背景视觉过来提了一个需求,要求完成一个星级评分控件,该控件中的星星的颜色需要实现渐变的效果,并且没有渐变的规律,也就是说各个星星的颜色需要不一样,效果如下: 二.问题分析星星控件对应的控件是a ...
（商品评价页）商品星级评分html+css+js
html部分: <div class="evaluate_main"><div class="evaluate_title"><d ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

uni-app+iconfont 实现星级评分（vue）

效果图

需求

1. uni-app

2. iconfont

3. 星星组件部分

uni-app+iconfont 实现星级评分（vue）相关推荐

最新文章

热门文章