1 背景
在使用vant組件開發(fā)微信小程序的時候,想更改vant組件內(nèi)部樣式,達(dá)到自己想要的目的(van-grid組件改成宮格背景色為透明,默認(rèn)為白色),官網(wǎng)沒有示例,通過以下幾步修改成功。
2 步驟
2.1 查看官方文檔
Grid 外部樣式類支持修改Grid組件樣式,我們在組件上添加該屬性即可,文件如下
類名 | 說明 |
---|---|
custom-class | 根節(jié)點樣式類 |
2.2 wxml文件
<van-grid column-num="4" custom-class="grid" border="{{false}}">
<van-grid-item use-slot wx:for="{{ menuList }}">
<navigator url="{{item.pagePath}}">
<view class="cont-item">
<image src="/image/page/{{item.imgSrc}}"></image>
<text>{{ item.name }}</text>
</view>
</navigator>
</van-grid-item>
</van-grid>
2.3 wxss文件
這里我們通過查看組件源碼知曉應(yīng)該修改.van-grid-item__content
樣式類,代碼如下:
.grid .van-grid-item__content {
background-color: rgba(255, 255, 255, 0);
}
2.4 修改前后效果對比
修改前:
?
修改后:
文章來源:http://www.zghlxwxcb.cn/news/detail-699735.html
注:本教程僅適用于page頁面更改vant組件樣式,若是自定義組件想修改vant組件樣式,就需要更改組件樣式隔離屬性,大型項目不做推薦。文章來源地址http://www.zghlxwxcb.cn/news/detail-699735.html
到了這里,關(guān)于微信小程序修改vant組件樣式的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!