微信小程式中使用Vant Weapp的ActionSheet上拉選單出現的樣式問題
阿新 • • 發佈:2020-10-29
貼一下原效果圖:
存在的問題:
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樣式問題。