工作250:uniapp--实战--flex布局--星级评分

<template><view ><view v-for="(item,index) in 5"><view  style="display: flex;padding: 24rpx 0 0 30rpx;"><text style="font-size: 30rpx;color: #333333;">001-祝菲</text><text style="margin-left:94rpx;font-size: 30rpx;color: #333333;">合计加分:100</text><u-rate :count="count" v-model="value" style="margin-left:94rpx;font-size: 30rpx;color: #333333;"></u-rate></view><view style="display: flex;flex-wrap: wrap;padding: 30rpx 0 0 30rpx;"><text style="font-size: 24rpx;color: #999999;">点赞加分:10</text><text style="margin-left: 108rpx;font-size: 24rpx;color: #999999;">点赞次数:10</text></view><view style="display: flex;;flex-wrap: wrap;padding: 10rpx 0 0 30rpx;"><text style="font-size: 24rpx;color: #999999;">投诉加分:10</text><text style="margin-left: 108rpx;font-size: 24rpx;color: #999999;">投诉次数:10</text><text style="margin-left: 108rpx;font-size: 24rpx;color: #999999;">市场评分:10</text></view></view></view>
</template><script>export default {data() {return {value: '',type: 'text',border: true,count: 5,}},methods: {}}
</script>
<style></style>

运行结果

工作250:uniapp--实战--flex布局--星级评分相关推荐

【uni-app】Flex布局
文章目录 Flex布局的概念 Flex的属性 flex-direction:设置元素的排列方向 flex-wrap: 使容器内的元素换行 justify-content:设置元素在主轴上的对齐方式 a ...
工作247:uniapp--实战--flex布局--商户星级
<template><view ><view v-for="(item,index) in 5"><view style="di ...
uni-app的flex盒模型与布局进阶写法（高手勿进）
uni-app的flex盒模型与布局进阶写法(高手勿进) 官方文档盒模型的进阶操作 flex布局总结官方文档许多细节不多赘述,细枝末节还是看官方文档盒模型 flex布局盒模型的进阶操作盒 ...
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染实际案例图片订单页面具体内容图片自己替换哈,随便找了个图片的做示例具体位置见目录结构通过模拟数据list 来实现数据渲染完善布局页 ...
Flex布局实战：支付宝首页
Flex布局实战:支付宝首页 index.wxml <view class="container"><view class= ...
uni-app+iconfont 实现星级评分（vue）
效果图需求点击星星进行评分,若评分低于三星,则展示问题原因,星级评分多少则高亮几颗星,所有选项均为必选项,评分完成后可提交表单,并把问题.星级分数.原因传给后台. 因需求原因先做了星星组件的 ...
微信小程序学习笔记④——Flex布局[实战样例之画骰子]
✅ 关于 Flex,很多优秀的前辈已经总结过了,比如:阮一峰的<Flex 布局教程:语法篇>.知乎林东洲的<30 分钟学会 Flex 布局>等等.他们主要是基于网页的,小辈斗胆 ...
Flex布局实战详解
Flex布局详解 1. 父项属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-cont ...
微信小程序入门与实战之rpx响应式单位与flex布局
新建页面的技巧与规则小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.json必须有一个pages数组: ...

工作250:uniapp--实战--flex布局--星级评分

工作250:uniapp--实战--flex布局--星级评分相关推荐

最新文章

热门文章