mint-ui仿QQ微信做左滑删除功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/88954174

在用H5做APP开发的时候，用到了左滑删除的功能，前端UI框架用的是mint-ui，就用到了一个组件Cell Swipe，直接上案例吧

mt-loadmore + mt-cell-swipe

<div class="page-loadmore">
    <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                @top-status-change="handleTopChange"
                @bottom-status-change="handleBottomChange"
                :auto-fill="false"
                ref="loadmore">
            <ul class="carInfoList page-loadmore-list">
                <mt-spinner :type="1" color="#26a2ff" v-if="showSpinner"></mt-spinner>
                <li class="carInfo listTouch" @click="goDetail(car)" v-for="(car,index) in carList">
                    <mt-cell-swipe
                        title="哈哈哈"
                        :right="[ 
                            {
                                content: '删除',
                                style: {display: 'flex',alignItems: 'center',webkitAlignItems: 'center',width:'3.84rem',justifyContent: 'center',webkitJustifyContent: 'center',background: '#E35959',color: '#fff', textAlign: 'center',fontSize: '0.64rem'},
                                handler: () => deleteCarEvent(car.carID)
                            } 
                        ]">
                        <div class="carItem">
                            <div class="carname">
                                {{car.carNo}}
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <div>
                                        车架号：<span>{{car.code}}</span>
                                    </div>
                                    <div>
                                        发动机号：<span>{{car.engineNumber}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </mt-cell-swipe>
                </li>
                <no-data v-if="carList.length === 0"></no-data>
            </ul>
           
            <div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="bottomStatus !== 'loading'"
                      :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
                <span v-show="bottomStatus === 'loading'">
                <mt-spinner type="snake"></mt-spinner>
              </span>
            </div>
        </mt-loadmore>
    </div>
</div>



deleteCarEvent(carID){
    const _this = this;
    console.log('要删除的carID为：' + carID)
    MessageBox.confirm('确定删除?').then(action => {
        deleteCar(carID).then(function(resolve){
            console.log(resolve)
            console.log(typeof resolve)
            _this.carList.splice( _this.carList.findIndex(item => item.carID === carID), 1)
        }, reject => {
            Toast('删除失败');
        })
    },reject=>{

    });
    
},

遇到的问题

不知道为什么，内容默认在右侧，强制更改样式

.carInfo .mint-cell:last-child {
    width: 100%!important;
}
.carInfo .mint-cell-title{
    display: none!important;
}
.carInfo .mint-cell-value{
    flex: 1!important;
    -webkit-box-flex: 1!important;
    -ms-flex: 1!important;
}
//撑满宽度的时候，不能给父元素padding，不然，删除键高度就与内容不一致
.carInfo .mint-cell:first-child .mint-cell-wrapper{
    padding: 1.25rem 0.83rem !important;
}