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;
}
結果
相關文章
- ViewPager 禁止左右滑動完美解決Viewpager
- 微信小程式:選單滑動微信小程式
- 移動端左滑右滑元件元件
- uniapp---app滑動翻頁(上滑、下滑、左滑、右滑)APP
- 小程式禁止swiper滑動
- 微信小程式-能左右滑動的訂單列表微信小程式
- 小程式接入滑動驗證
- 微信小程式滑動懸停微信小程式
- Taro UI開發小程式實現左滑喜歡右滑不喜歡效果UI
- 直播小程式原始碼,小程式頁面左右滑動如何解決原始碼
- UIPikerView 省市區三聯滑動,解決滑動崩潰問題UIView
- NestedScrollView+RecyclerView 滑動卡頓簡單解決方案View
- 移動端swiper嵌iframe無法滑動的解決方案
- 完美解決ScrollView巢狀ListView滑動衝突(有圖有真相)View巢狀
- 微信小程式『側邊欄滑動』特效微信小程式特效
- 微信小程式左滑效果微信小程式
- Android側滑(右滑、下拉)返回控制元件 - SwipeBackLayoutAndroid控制元件
- 微信小程式實現卡片左右滑動效果微信小程式
- (有圖)仿QQ側滑選單:RecyclerView側滑選單,長按拖拽,滑動刪除View
- 仿switch風格滑動按鈕
- (iOS)可以這樣來玩玩tableViewCell的滑動選單iOSView
- web前端仿手機左右滑動(手滑+自動滑動)Web前端
- 函式節流實現滑動下拉選單函式
- ScrollView 與ListView 滑動衝突解決View
- iOS Kingdom — 滑動選單iOS
- jQuery滑動導航選單jQuery
- MySQL 滑動訂單問題MySql
- 解決右滑返回手勢和UIScrollView中的手勢衝突UIView
- 微信小程式仿微信, QQ 向左滑動刪除操作。微信小程式
- 聊天平臺原始碼,簡單使用 禁止滑動和設定滑動方向原始碼
- vxe-table 自定義單元格樣式
- JavaScript滑動門特效詳解JavaScript特效
- 實現抖音 “影片無限滑動“效果
- 直播app開發,滑動式的頂部導航欄(左右橫向滑動)APP
- Android View 滑動衝突解決方式以及原理AndroidView
- 解決ScrollView巢狀RecyclerView滑動卡頓問題View巢狀
- 一種巢狀滑動衝突的解決方案巢狀
- 巢狀UIScrollview的滑動衝突解決方案巢狀UIView