首页 > 其他分享 >uni-swipe-action的使用和样式问题

uni-swipe-action的使用和样式问题

时间:2023-11-03 11:38:17浏览次数:40  
标签:左滑 样式 swipe item action uni

<uni-swipe-action>
            <view v-for="(item,index) in noticeList" :key="item.id" style="margin-top: 30upx;">
                <uni-swipe-action-item class="swipe-action-item" :right-options="options" @click="bindClick(item.id)">
                    <view class="list-box" @click.stop="handelToDetail(item.id)">
                        <view class="list-item-left">
                            <image src="../../../static/informationCollection/[email protected]"></image>
                        </view>
                        <view class="list-item-middle">
                            <view class="louyu-title">{{item.userType}}</view>
                        </view>
                        <view class="list-item-right">
                            <image src="../../../static/right-arrow.png"></image>
                        </view>
                        <view class="clear"></view>
                    </view>
                </uni-swipe-action-item>
            </view>
        </uni-swipe-action>

uni-swipe-action-item里面盒子是组件里面所包括的内容,但是一旦中间的盒子有上边距或者下边距,那么它左滑或者右滑的时候就会有样式问题,

组件左滑删除或者是确认还是原来的位置没有上边距或下边距,此时就需要在uni-swipe-action-item外面套一层view,然后在这上面写上样式,循环也放到这上面,问题就完美解决啦!

标签:左滑,样式,swipe,item,action,uni
From: https://www.cnblogs.com/prince11/p/17807203.html

相关文章

  • uniapp做app跳转小程序支付功能
    1.app里面代码app向小程序路径传参的时候,如果太长或者是里面有特殊符号建议先使用编码然后再小程序端解码实现传送(编码代码如下)encodeURIComponent(JSON.stringify(params))//编码JSON.parse(decodeURIComponent(option.params))//解码  plus.share.getServices((s)=>......
  • 定制unittest测试报告
    基于HTMLTestRunner的定制版本非常多,我这几天手动定制了一款,除了有不错的颜值,还提供了一些非常实用的功能。安装github:https://github.com/SeldomQA/HTMLTestRunner>gitclonehttps://github.com/SeldomQA/HTMLTestRunner>cdHTMLTestRunner/>pythonsetup.pyinstall基本使......
  • uniapp小程序所遇到的bug
    最近小程序添加好多条条框框的规矩比如1、登录的时候要弹出隐私规则的弹窗2、要使用的api涉及到隐私的一定要在隐私规则里配置,在微信公众平台的设置里,更新隐私规则3、.如果涉及到手机号登录的小程序,则需要有游客模式,就是不可以在登录的时候向用户获取手机号,要在具体功能的前面......
  • uni.uploadFile和this.$refs.signatureRef.canvasToTempFilePath
    canvasToTempFilePath生成的图片是临时h5路径可用于临时回显,如果图片的路径要上传接口,需要使用uni.uploadFile来将图片上传到服务器//我用uniapp做app签名时写的代码片段,上传完服务器之后的路径就可以传到后端给的接口啦,然后在查询的时候就可以通过订单返回的图片路径进行回显t......
  • uniapp app横屏竖屏问题导致样式紊乱
    最近做了一个点击签名然后要让app自动横屏的功能,此功能难点在于退出横屏的时候,会导致竖屏的页面紊乱。首先如果要让app横屏,要先在manifest.json的源码视图app-plus里添加"flexible":true,表示app可以横竖切换然后在想要横屏的页面里加上onShow(){         uni.sh......
  • uniapp-ucloud 数据库里面添加记录
    要保持本地跟云端的表一致。同步。还有设置权限constdb=uniCloud.database()constjiemengCollection=db.collection('jiemeng') for(constrowofdata){ console.log(row) try{ jiemengCollection.add(row) }catch(e){ ......
  • Unity DOTS系列之Struct Change核心机制分析
    最近DOTS发布了正式的版本,我们来分享一下DOTS里面StructChange机制,方便大家上手学习掌握UnityDOTS开发。基于ArchType与Chunk的Entity管理机制  我们回顾以下ECS的内存管理核心机制,基于ArchType+Chunk的Entity管理模式。每个Entity不直接存放数据,数据全部存放到Component......
  • Unity-Android 权限相关问题
    1.生成AndroidManifestFile->buildSetting->playerSetting->Android->publishingSettings权限添加位置:<?xmlversion="1.0"encoding="utf-8"?><manifestxmlns:android="http://schemas.android.com/apk/res/android......
  • uniapp 动态修改顶部导航栏右侧按钮 titleNView(APP-PLUS、H5)
    1<script>2exportdefault{3onReady(){4//已渲染5varpages=getCurrentPages();6varpage=pages[pages.length-1];78//#ifdefH59document.querySelector('.uni-page-head-ft.uni-......
  • Hive / ClickHouse 行转列函数 collect_set() / groupUniqArray() 入门
    Hive/ClickHouse行转列函数collect_set()/groupUniqArray()入门在数据处理和分析中,我们经常会遇到需要将一行数据转换为多列的情况。在Hive和ClickHouse中,可以使用collect_set()和groupUniqArray()函数来实现行转列操作。collect_set()1.功能说明collect_set()函......