vant小程式SwipeCell 完美解決滑動單元格右滑無樣式
這個bug是比較坑人的!
直接引入後發現右滑無樣式
程式碼如下:
<van-swipe-cell right-width="{{ 65 }}">
<van-checkbox name="a" label-class="car-product-item-cell">
<van-card price="2.00" desc="描述資訊" title="商品標題" thumb="https://img.yzcdn.cn/vant/apple-2.jpg" lazy-load>
<view slot="num" class="car-product-itemStepper">
<van-stepper value="{{ 1 }}" catchtap="onChange" />
</view>
</van-card>
</van-checkbox>
<view slot="right">刪除</view>
</van-swipe-cell>
解決方案
新增樣式到wxss
.van-swipe-cell__left,
.van-swipe-cell__right {
display: inline-block;
width: 65px;
font-size: 15px;
color: #fff;
text-align: center;
background-color: #f44;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
結果
相關文章
- 移動端左滑右滑元件元件
- uniapp---app滑動翻頁(上滑、下滑、左滑、右滑)APP
- 小程式禁止swiper滑動
- Taro UI開發小程式實現左滑喜歡右滑不喜歡效果UI
- 小程式接入滑動驗證
- 直播小程式原始碼,小程式頁面左右滑動如何解決原始碼
- 微信小程式-能左右滑動的訂單列表微信小程式
- 微信小程式滑動懸停微信小程式
- UIPikerView 省市區三聯滑動,解決滑動崩潰問題UIView
- 移動端swiper嵌iframe無法滑動的解決方案
- Android側滑(右滑、下拉)返回控制元件 - SwipeBackLayoutAndroid控制元件
- 函式節流實現滑動下拉選單函式
- 微信小程式左滑效果微信小程式
- 微信小程式實現卡片左右滑動效果微信小程式
- Android View 滑動衝突解決方式以及原理AndroidView
- 用滑動視窗來解決最長無重複子串問題
- 聊天平臺原始碼,簡單使用 禁止滑動和設定滑動方向原始碼
- 滑鼠滑過和獲取焦點樣式
- JavaScript滑動門特效詳解JavaScript特效
- 一種巢狀滑動衝突的解決方案巢狀
- 解決方案 | IrfanView如何滑動滾輪影像縮放?View
- 直播app開發,滑動式的頂部導航欄(左右橫向滑動)APP
- 解決Flutter的ListView巢狀ListView滑動衝突以及無限高度問題FlutterView巢狀
- 短視訊平臺搭建,淡入淡出 支援左滑右滑輪播圖
- vxe-table 自定義單元格樣式
- Android 設定TextView滑動滾動條和滑動效果AndroidTextView
- 用ListView簡單實現滑動列表View
- CollectionView 單個選項卡的滑動View
- 一種非巢狀滑動衝突的解決方案巢狀
- Android 自定義View 滑動解鎖AndroidView
- iOS右滑返回手勢深度全解和最佳實施方案iOS
- 微信小程式仿微信, QQ 向左滑動刪除操作。微信小程式
- 2024-11-21 uniapp小程式ios端設定overflow:hidden無法禁止頁面滑動APPiOS
- 滑動條:QSliderIDE
- jQuery 效果 – 滑動jQuery
- android可以無限迴圈滑動的ViewPagerAndroidViewpager
- 實現抖音 “影片無限滑動“效果
- 小程式 — 實現左滑刪除效果(列表)③