如果需求主要应用于手机浏览器,手机浏览器的标题栏和uni-app的标题栏重复,可将uni-app默认的浏览器隐藏
//pages.json
"style" : {
"navigationStyle":"custom" //单个取消导航栏
},
"globalStyle" : {
"navigationStyle": "custom" //全局取消导航栏
}
<template>
<view class="uni-padding-wrap uni-common-mt star">
<view style="display: flex;" 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>
uni-app的iconfont引入,目前只能成功引入Unicode格式,也就导致之后的开发不能通过动态绑定class实现。
iconfont Unicode引入方法
<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="scss">
.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;
}
}
@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: "iconfont" !important;
font-size: 12px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
margin-left: 30upx;
}
</style>