zoukankan      html  css  js  c++  java
  • Vant weapp踩坑之滑动单元格SwipeCell右滑无样式解决办法

    根据官方教程,在wxml里键入

    <van-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
    <view slot="left">选择</view>
    <van-cell-group>
    <van-cell title="单元格" value="内容" />
    </van-cell-group>
    <view slot="right">删除</view>
    </van-swipe-cell>
    ,在.js里键入

    Page({
    onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
    case 'left':
    case 'cell':
    instance.close();
    break;
    case 'right':
    Dialog.confirm({
    message: '确定删除吗?'
    }).then(() => {
    instance.close();
    });
    break;
    }
    }
    });
    是得不到官方的效果如下的:

    你会发现右边的删除是没有样式的,

    因此,需要在wxss里添加上如下样式:

    .van-swipe-cell__left,
    .van-swipe-cell__right {
    display: inline-block;
    65px;
    height: 44px;
    font-size: 15px;
    line-height: 44px;
    color: #fff;
    text-align: center;
    background-color: #f44;

  • 相关阅读:
    python生成CSV文件并发送邮件
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    Live2d Test Env
    扔鸡蛋
  • 原文地址:https://www.cnblogs.com/javalinux/p/14706153.html
Copyright © 2011-2022 走看看