微信小程序中使用Vant Weapp的ActionSheet上拉菜單出現的樣式問題

貼一下原效果圖：

 

 

存在的問題：

1.每一項樣式高度太大，跟示例不一樣；

2.取消按鈕不居中，上方的間隔條（灰色地方）也不居中。

ps：微信開發工具和真機模擬存在同樣的問題，出現的問題僅在我開發中遇到的，沒遇到的請忽略。

以下修改的源碼均在action-sheet組件中。

解決問題：

1.通過查看樣式源代碼發現行高度被設置為50px（是不是有貓病？），原示例代碼是22px,所以修改行高度為22px即可解決。

在index.wxss:

 

 

 2.下方的取消按鈕不居中，通過審查元素發現它的寬帶已經超出了手機屏幕的寬度，出現的滾動條導致的，

 

 

具體 什么原因導致暫時不知，解決方案是給.van-action-sheet__cancel添加樣式box-sizing: border-box可解決。

在index.wxss:

.van-action-sheet__cancel {    
    box-sizing: border-box
}

 

上方的灰色間隙在小程序ui和h5 ui方式不一樣，h5方案按鈕與取消按鈕之間添加一個div用來做間隔，而小程序ui是給.van-action-sheet__cancel添加偽元素控制，同樣樣式存在問題。因此直接修改源碼采用h5方案即可解決。

在index.wxm添加代碼：

<view
   wx:if="{{ cancelText }}"
   class="van-action-sheet__gap"
></view>     

在index.wxss:

注釋掉.van-action-sheet__cancel:before，同時添加.van-action-sheet__gap的樣式

.van-action-sheet__gap {
    display: block;
    height: 8px;
    height: var(--action-sheet-cancel-padding-top, 8px);
    background-color: #f7f8fa;
    background-color: var(--action-sheet-cancel-padding-color, #f7f8fa)
}

通過以上修改，可解決action-sheet樣式問題。