网站建设及规划,企业网站源码 vue,帮助设计的网站,重庆市工程建设信息网中项网目录
#平台差异说明
#基本使用
#修改按钮样式
#点击事件
#API
#Props
#Event 该组件一般用于左滑唤出操作菜单的场景#xff0c;用的最多的是左滑删除操作。
注意
如果把该组件通过v-for用于左滑删除的列表#xff0c;请保证循环的:key是一个唯一值#xff0c;可以…
目录
#平台差异说明
#基本使用
#修改按钮样式
#点击事件
#API
#Props
#Event 该组件一般用于左滑唤出操作菜单的场景用的最多的是左滑删除操作。
注意
如果把该组件通过v-for用于左滑删除的列表请保证循环的:key是一个唯一值可以用数据的id或者title替代。 不能是数组循环的index否则删除的时候可能会出现数据错乱
#平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√
#基本使用
通过slot传入内部内容即可可以将v-for的index索引值传递给index参数用于点击时在回调方法中对某一个数据进行操作(点击回调时第一个参数会返回此索引值)内部的按钮通过options参数配置此参数为一个数组元素为对象可以配置按钮的文字背景颜色(建议只配置此两个参数即可)请勿配置宽高等属性。
说明有时候我们在打开一个swipeAction的同时需要自动关闭其他的swipeAction这时需要通过open事件实现见如下
templateviewu-swipe-action :showitem.show :indexindex v-for(item, index) in list :keyitem.id clickclick openopen:optionsoptionsview classitem u-border-bottomimage modeaspectFill :srcitem.images /!-- 此层wrap在此为必写的否则可能会出现标题定位错误 --view classtitle-wraptext classtitle u-line-2{{ item.title }}/text/view/view/u-swipe-action/view
/templatescriptexport default {data() {return {list: [{id: 1,title: 长安回望绣成堆山顶千门次第开一骑红尘妃子笑无人知是荔枝来,images: https://cdn.uviewui.com/uview/common/logo.png,show: false},{id: 2,title: 新丰绿树起黄埃数骑渔阳探使回霓裳一曲千峰上舞破中原始下来,images: https://cdn.uviewui.com/uview/common/logo.png,show: false},{id: 3,title: 登临送目正故国晚秋天气初肃。千里澄江似练翠峰如簇,images: https://cdn.uviewui.com/uview/common/logo.png,show: false,}],disabled: false,btnWidth: 180,show: false,options: [{text: 收藏,style: {backgroundColor: #007aff}},{text: 删除,style: {backgroundColor: #dd524d}}]};},methods: {click(index, index1) {if(index1 1) {this.list.splice(index, 1);this.$u.toast(删除了第${index}个cell);} else {this.list[index].show false;this.$u.toast(收藏成功);}},// 如果打开一个的时候不需要关闭其他则无需实现本方法open(index) {// 先将正在被操作的swipeAction标记为打开状态否则由于props的特性限制// 原本为false再次设置为false会无效this.list[index].show true;this.list.map((val, idx) {if(index ! idx) this.list[idx].show false;})}}};
/scriptstyle langscss scoped.item {display: flex;padding: 20rpx;}image {width: 120rpx;flex: 0 0 120rpx;height: 120rpx;margin-right: 20rpx;border-radius: 12rpx;}.title {text-align: left;font-size: 28rpx;color: $u-content-color;margin-top: 20rpx;}
/style#修改按钮样式
通过options参数配置按钮的数量和样式见上方说明通过btn-width设置按钮的宽度单位rpx
u-swipe-action btn-width180 :optionsoptions...
/u-swipe-action#点击事件
click点击事件回调中有两个参数第一个参数为通过Props传入的index参数第二个参数为滑动按钮的索引即options数组的索引 用于标识第几个按钮被点击。
#API
#Props
参数说明类型默认值可选值bg-color整个组件背景颜色String#ffffff-index标识符点击时候用于区分点击了哪一个用v-for循环时的index即可String | Number--btn-width按钮宽度单位rpxString | Number180-disabled是否禁止某个swipeAction滑动Booleanfalsetruevibrate-short是否使手机发生短促震动目前只在iOS的微信小程序和微信小程序开发工具有效Booleanfalsetrueshow打开或者关闭某个组件Booleanfalsetrueoptions按钮组的配置参数数组形式见上方说明Array[ ]-
#Event
事件名说明回调参数click点击组件时触发(index1, index)见上方点击事件的说明close组件触发关闭状态时index: 通过props传递的indexopen组件触发打开状态时index: 通过props传递的indexcontent-click点击内容时触发index: 通过props传递的index
