貼一下原效果圖：

存在的問題：

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樣式問題。