小程序修改自定義組件樣式

需求

改變下拉框的寬度，未改變之前寬度是寫死的，文字距離箭頭很遠

 

 

 

 

解決思路

在組件的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;

}