uniapp调查问卷评价功能

 我本来用的是uniapp官方提供的组件uni-rate组件，但修改成我想要的样式有点麻烦，于是我就自己手写一个，比用组件简单一点；

 

dom结构 

<text class="formTit must">请您对本次活动进行评价</text>
<view class="evaluate mb-40rpx"><view class="row" v-for="(val, index) in starName" :key="index"><view class="progress" :class="star > index ? 'selected' : ''" @click="setStar(index + 1)"> </view><text class="tit" :class="star == index + 1 ? 'active' : ''">{{ val }}</text></view>
</view>

 js部分

// 评价
const star = ref(2); //评价，默认2星
const starName = ["差", "一般", "较好", "好"];
const setStar = (val: any) => {star.value = val;
};

 css部分（我用的是scss + tailwindcss，不懂的可以去看看，很方便，写入类名就可以改变样式）

.formTit {@apply block text-#363A44 text-32rpx font-bold mb-20rpx mt-40rpx;}.must {&::after {font-size: 32rpx;color: #f00;content: "*";}
}
.evaluate {@apply w-full flex justify-between items-center;.row {@apply w-full flex flex-col justify-center items-center;width: calc((100% - 6rpx) / 4);&:nth-of-type(1) {.progress {border-radius: 12rpx 0 0 12rpx;}}&:nth-of-type(4) {.progress {border-radius: 0 12rpx 12rpx 0;}}}.progress {@apply w-full bg-#eef5ff h-40rpx;}.selected {background-color: #428ffc;}.tit {@apply w-full text-32rpx text-#9B9B9B text-center pt-20rpx;}.active {@apply text-#363a44 font-bold;color: #363a44;}}