小程式修改自定義元件樣式
阿新 • • 發佈:2021-01-21
需求
改變下拉框的寬度,未改變之前寬度是寫死的,文字距離箭頭很遠
解決思路
在元件的js檔案中將wxml中需要修改的標籤class暴露出來,然後在引用元件時
對暴露出的class進行class覆蓋。
1.找到需要修改的標籤
<view class='ms-content-box'> <view class='ms-content' bindtap='selectToggle'> <view class='ms-text'>{{selectText}}</view> <view class="{{selectShow ? 'icon-u p' : 'icon-down'}}"></view> </view> <view class='ms-options' wx:if="{{selectShow}}"> <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text || item.value || item}}</view> </view> </view>
通過對元件的觀察,我們需要覆蓋的標籤的class為
ms-content-box
2.在元件的js檔案中將這個class暴露
Component({
externalClasses: ['
ms-content-box'],
})
3.在引用頁面引用該元件時對暴露出的class進行覆蓋
<view class="select"> <!-- 下拉框元件start --> <single-dropdown-select prop-array='{{selectArray}}' selectText="{{selectText}}" bind:select='select' ms-content-box='new-ms-content-box' selectText="{{selectText}}" /> </view>
4.在wxss檔案中新增需要修改的樣式
.new-ms-content-box{ width:auto!important; }