前言:
对于vant-weapp可以局部修改,也可以全局修改,局部修改就是,需要在哪个页面中使用,就修改当前页面的样式,不会影响其他的页面,我使用的是局部修改。其实很简单 vant-weapp 已经给我们提供好了。
如,我要修改商品卡片 van-card 组件中的商品标题的样式;
修改前:
我要将它改为只显示两行。第二行超出部分用 … 显示
其实 vant-weapp 已经给我们提供好了 外部样式属性了
在wxml文件中:
<van-card
wx:for="{{rightConentList}}"
wx:key="*this"
num="{{item.num}}"
price="{{item.money}}"
title="{{item.title}}"
thumb="{{ item.img }}"
data-item="{{item}}"
bind:tap="goDetail"
title-class="aaa"
/>
// 注意 title-class="aaa" 这个才是重点
在wxss中:
.aaa{
height: 80rpx;
width: 300rpx;
// border: 1px solid black;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// 表示只显示两行,并且第二行超出部分显示...
}
// 注意 这里就是你需要修改的样式
然后我的最后修改后的效果图如下:
不仅 van-card 商品组件是这样修改,我看了一下,其他组件也都提供了外部样式类,所以修改方法也都是一样的。