小程序van-cell组件修改宽度并左对齐

最新推荐文章于 2023-10-31 14:31:55 发布
最新推荐文章于 2023-10-31 14:31:55 发布
阅读量1.5k 收藏 2
点赞数
文章标签： 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46463849/article/details/130392782
版权

 开发工具可以看出title和value的宽度是各占一半，尝试使用官方的外部样式改没有用

 仔细看文档还有另一个配置可以修改，给title修改宽度后value还是flex1，但是文本还是左对齐的，有点不美观，需要继续完善

 

 

 

最后实现效果

 

 

热心网友jwj
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序checkbox组件使用详解
08-28
主要介绍了微信小程序checkbox组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
van-cell组件 解决 title和value宽度以及value内容过长换行的问题
wjqwjq666666的博客
04-09 1万+
van-cell 组件默认宽度为各占50% 想要增加vaue的宽度，给当前组件的van-cell__value设置min-width van-cell__value本身是右对齐，但是换行之后，最后一行需要左对齐而不是右对齐，解决方法如下面的span样式 .address-cell { .van-cell__value { min-width: 70%; span {...
微信小程序 van-uploadedr 上传图片并压缩组件
03-15
微信小程序 图片压缩、组件、压缩文件大小数量、可配置、压缩质量可配置 <compress-uploader file-list="{{ fileList }}" max-count="6" bind:after-read="afterRead" bind:delete="deleteClick" quality="0.8" /> // 删除照片 deleteClick(event) { debugger var imgData = this.data.fileList; // 通过splice方法删除图片 imgData.splice(event.detail.detail.index, 1); // 更新图片数组 this.setData({ fileList: imgData }) }, afterRead(event) { let that = this; //防止this指向问题 // loading加载 wx.showLoading({
cell中label有多行文字的适配
denggun12345的博客
06-06 1039
案例场景：cell里有多个控件，其中包含一个label，此label的文字(字段为value)数目不一定，且为了好看，label每行文字间要求有一定的间距1.首先想到的是计算某段文字的高度的方法 boundingRectWithSize计算文字的高度，NSMutableAttributedString的NSMutableParagraphStyle方法设置行间距，但是1:由于此label用到了si...
【案例】前端对接LED设备发送指令
~牧马~
11-28 582
遇到的坑：要求格式是00 00，10进制的125转为16进制结果为7D，结果应该为7D 00，写入指令发送是没有反应的，是错误的，搞了半天发现这里格式须为00 7D，才可以指令发送成功，显示出来，所在代码中的位置。如果能够做到精准，一家一策、一人一策，当然是最好的，但需要通过专业人员评估社区环境、家庭通风下水条件等，确保周围是安全的。思路：需要将输入的内容转为16进制的gb2312编码格式发送给设备才可以，在这里笔者遇到一个坑，后面有详说。需求：前端对接LED显示屏，且可以根据LED指令说明灵活性设置。
Vant Weapp 的van-cell 与 van-cell-group的边框
最新发布
qq_59626859的博客
10-31 918
用van-cell循环出来的单元格，最上面有一条边框线，且找不到该元素；就没有那个上边框了。
van-cell宽度问题
weixin_43893437的博客
07-08 1万+
van-cell里面的van-cell__title和van-cell__value的宽度默认是50%，而且怎么修改也没有变化，后来发现是在min-width做了限制，所以修改相应类的min-width即可
关于设置van-cell单元格的value内容靠左对齐的解决方案
weixin_44395326的博客
07-06 6811
van-cell 组件默认为title和value设置宽度各占50% title本身是左对齐，van-cell__value本身是右对齐，想要使value靠左对齐，可给当前组件的van-cell__value设置min-width（设置value内容的最小宽度） 设置min-width后设置text-align为left即可 .cell-class-name { color: #1989FA; .van-cell__value { min-width: 80%; //可根据自己需求设定值
【实战】前端必会 —— 微信小程序对 van-cell 中 value 的 icon 的自定义
程序边界
06-24 2443
van-cell 功能不多说UI设计图中涉及在cell右侧的value的左侧需要添加一个小图标van-cell中：若想要value左侧设置图标，有些束手无策。。。使用 icon 和 right-icon，使用绝对定位，位置通过 left/right 控制（仅限于内容长度固定的地方） over.........
小程序 van-cell 换行能左对齐问题
suzhiwei_boke的博客
05-20 1779
van-cell 的value 属性 默认是右对齐，这时候我们只想显示信息的时候就可以运用父元素用右对齐，子元素用行内块元素，然后左对齐 /* 解决多行能出现向左对齐的情况 */ .van-cell__value>text{ display: inline-block; text-align: left; word-break: break-all; //换行能显示全部字符 } <van-cell title="活动标题" title-width="7e...
微信小程序（二十二）action-sheet组件详细介绍
09-01
主要介绍了微信小程序action-sheet组件详细介绍的相关资料,需要的朋友可以参考下
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 ...van-cell value=未完成 lab
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序 自定义组件 - 弹出菜单demo
03-29
我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，感觉好像弥补了template的那个缺点，于是写了个小demo，也算做个笔记 我觉得 如果不需要传参，也不需要向外发送事件的，可以用include，相当于直接把...
cell分割线左对齐，不起作用？用下边的方法
童真的烂漫的专栏
12-31 1249
http://www.skyfox.org/ios7-tableview-separatorinset-ajust.html ios7下 //ios8下的新方法 -(void)viewDidLayoutSubviews {     if ([_iCoureseTabelView respondsToSelector:@selector(setSeparatorIns
cell让分割线左对齐
UEdge的博客
07-21 743
让分割线左对齐文章是用gitbook写的；可能有点不支持markdown，欢迎访问原文cell让分割线左对齐在iOS8之后，UITableView的分割线距离左边会有一段距离；我们这里就让这段距离消失。首先在iOS7里面让分割线左对齐只要一句代码就好了：[self.tableView setSeparatorInset:UIEdgeInsetsZero];但是在iOS8之后这样只能缩进1/2左右，还
vue的el-table表格，希望列表头文字居中，却希望该列中的单元格中的文字靠左对齐
热门推荐
little_kid_pea的博客
09-20 4万+
列表头文字居中 设置el-table-column元素的align='center'， 该列中的单元格中的文字靠左对齐，则使用span 绑定v-html文字，并设置span的css样式为text-align:left;不管用，得用div，text-align:left;才管用 span 是内联元素，text-align:left;是不管用的 div是块级元素，text-align:l...
【小程序】封装时间选择组件：用单元格van-cell和插槽slot，包括起始时间和终止时间
karshey的博客
05-25 1543
用的组件：Cell单元格、DatetimePicker时间选择、Popup弹出层。用来在js方法中得知选择的是开始还是结束的时间。注意，这里的van-cell的value放的是时间选择器，以。功能并不完善，比如没有end必须>=start的判断等。时间选择器放在van-cell的value插槽中。可以选择起始时间和终止时间，并显示。只是记录自己敲码的过程，水平很烂。这个功能感觉很常见，记录一下。实现value的插槽，而不是。根据文档：这里要求用。会用到dayjs库。
Vant_Cell 单元格
骑大马挎大刀
04-07 1757
van-cell 组件默认宽度为各占50%,想要增加value的宽度，给当前组件的van-cell__value设置min-width .van-cell__value { min-width: 70%; }
VUE 封装一个van-cell-group组件可以修改内容并在其他页面引用
06-01
是的，您可以封装一个自定义的 `van-cell-group` 组件并在其他页面中引用。具体的实现方式如下： 1. 在 `van-cell-group` 组件中添加自定义的插槽，例如： ```html <template> <div class="van-cell-group"> <slot></slot> <slot name="custom"></slot> </div> </template> ``` 2. 在需要使用自定义内容的地方，使用 `template` 标签并添加 `v-slot` 指令，例如： ```html <template> <van-cell-group> <van-cell title="默认内容"></van-cell> <template v-slot:custom> <van-cell title="自定义内容"></van-cell> </template> </van-cell-group> </template> ``` 3. 在其他页面中引用该组件，例如： ```html <template> <div> <van-cell-group> <van-cell title="默认内容"></van-cell> <template v-slot:custom> <van-cell title="自定义内容"></van-cell> </template> </van-cell-group> </div> </template> <script> import MyCellGroup from '@/components/MyCellGroup.vue' export default { components: { MyCellGroup } } </script> ``` 这样就可以在其他页面中引用自定义的 `van-cell-group` 组件，并且可以通过 `v-slot` 指令来添加自定义的内容。需要注意的是，在引用组件时需要先将组件注册为局部组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值