当前位置：网站首页>微信小程序 uniapp 左滑 删除 带删除icon
微信小程序 uniapp 左滑 删除 带删除icon
2022-06-26 18:10:00 【RosaChampagne】
效果图：
代码结构如下：
代码：
uni-swipe-action.vue
<template>
<view>
<slot></slot>
</view>
</template>
<script>
/**
* SwipeAction 滑动操作
* @description 通过滑动触发选项的容器
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
*/
export default {
data() {
return {};
},
provide() {
return {
swipeaction: this
}
},
created() {
this.children = []
},
methods: {
closeOther(vm) {
let children = this.children
children.forEach((item, index) => {
if (vm === item) return
// 支付宝执行以下操作
// #ifdef MP-ALIPAY
if (item.isopen) {
item.close()
}
// #endif
// app vue 端、h5 、微信、支付宝 执行以下操作
// #ifdef APP-VUE || H5 || MP-WEIXIN
let position = item.position[0]
let show = position.show
if (show) {
position.show = false
}
// #endif
// nvue 执行以下操作
// #ifdef APP-NVUE || MP-BAIDU || MP-QQ || MP-TOUTIAO
item.close()
// #endif
})
}
}
}
</script>
<style>
</style>
bindingx.js
const BindingX = uni.requireNativePlugin('bindingx');
const dom = uni.requireNativePlugin('dom');
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
right: 0,
button: [],
preventGesture: false
}
},
watch: {
show(newVal) {
if (!this.position || JSON.stringify(this.position) === '{}') return;
if (this.autoClose) return
if (this.isInAnimation) return
if (newVal) {
this.open()
} else {
this.close()
}
},
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
mounted() {
this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
this.selector = this.getEl(this.$refs['selector-content-hock']);
this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
this.position = {}
this.x = 0
setTimeout(() => {
this.getSelectorQuery()
}, 200)
},
beforeDestroy() {
if (this.timing) {
BindingX.unbind({
token: this.timing.token,
eventType: 'timing'
})
}
if (this.eventpan) {
BindingX.unbind({
token: this.eventpan.token,
eventType: 'pan'
})
}
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
onClick(index, item) {
this.$emit('click', {
content: item,
index
})
},
touchstart(e) {
if (this.isInAnimation) return
if (this.stop) return
this.stop = true
if (this.autoClose) {
this.swipeaction.closeOther(this)
}
let endWidth = this.right
let boxStep = `(x+${this.x})`
let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
let props = [{
element: this.selector,
property: 'transform.translateX',
expression: pageX
}]
let left = 0
for (let i = 0; i < this.options.length; i++) {
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
let moveMix = endWidth - left
left += this.button[i].width
let step = `(${this.x}+x)/${endWidth}`
let moveX = `(${step}) * ${moveMix}`
let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
props.push({
element: buttonSelectors,
property: 'transform.translateX',
expression: pageButtonX
})
}
this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
if (e.state === 'end') {
this.x = e.deltaX + this.x;
if (this.x < -endWidth) {
this.x = -endWidth
}
if (this.x > 0) {
this.x = 0
}
this.stop = false
this.bindTiming();
}
})
},
touchend(e) {
this.$nextTick(() => {
if (this.isopen && !this.isDrag && !this.isInAnimation) {
this.close()
}
})
},
bindTiming() {
if (this.isopen) {
this.move(this.x, -this.right)
} else {
this.move(this.x, -40)
}
},
move(left, value) {
if (left >= value) {
this.close()
} else {
this.open()
}
},
/**
* 开启swipe
*/
open() {
this.animation(true)
},
/**
* 关闭swipe
*/
close() {
this.animation(false)
},
/**
* 开启关闭动画
* @param {Object} type
*/
animation(type) {
this.isDrag = true
let endWidth = this.right
let time = 200
this.isInAnimation = true;
let exit = `t>${time}`;
let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
let props = [{
element: this.selector,
property: 'transform.translateX',
expression: translate_x_expression
}]
let left = 0
for (let i = 0; i < this.options.length; i++) {
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
let moveMix = endWidth - left
left += this.button[i].width
let step = `${this.x}/${endWidth}`
let moveX = `(${step}) * ${moveMix}`
let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
props.push({
element: buttonSelectors,
property: 'transform.translateX',
expression: pageButtonX
})
}
this.timing = BindingX.bind({
eventType: 'timing',
exitExpression: exit,
props: props
}, (e) => {
if (e.state === 'end' || e.state === 'exit') {
this.x = type ? -endWidth : 0
this.isInAnimation = false;
this.isopen = this.isopen || false
if (this.isopen !== type) {
this.$emit('change', type)
}
this.isopen = type
this.isDrag = false
}
});
},
/**
* 绑定 BindingX
* @param {Object} anchor
* @param {Object} props
* @param {Object} fn
*/
_bind(anchor, props, eventType, fn) {
return BindingX.bind({
anchor,
eventType,
props
}, (e) => {
typeof(fn) === 'function' && fn(e)
});
},
/**
* 获取ref
* @param {Object} el
*/
getEl(el) {
return el.ref
},
/**
* 获取节点信息
*/
getSelectorQuery() {
dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
if (this.position.content) return
this.position.content = data.size
})
for (let i = 0; i < this.options.length; i++) {
dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
if (!this.button) {
this.button = []
}
if (this.options.length === this.button.length) return
this.button.push(data.size)
this.right += data.size.width
if (this.autoClose) return
if (this.show) {
this.open()
}
})
}
}
}
}
index.wxs
/**
* 监听页面内值的变化,主要用于动态开关swipe-action
* @param {Object} newValue
* @param {Object} oldValue
* @param {Object} ownerInstance
* @param {Object} instance
*/
function sizeReady(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
state.position = JSON.parse(newValue)
if (!state.position || state.position.length === 0) return
var show = state.position[0].show
state.left = state.left || state.position[0].left;
// 通过用户变量,开启或关闭
if (show) {
openState(true, instance, ownerInstance)
} else {
openState(false, instance, ownerInstance)
}
}
/**
* 开始触摸操作
* @param {Object} e
* @param {Object} ins
*/
function touchstart(e, ins) {
var instance = e.instance;
var state = instance.getState();
var pageX = e.touches[0].pageX;
// 开始触摸时移除动画类
instance.removeClass('ani');
var owner = ins.selectAllComponents('.button-hock')
for (var i = 0; i < owner.length; i++) {
owner[i].removeClass('ani');
}
// state.position = JSON.parse(instance.getDataset().position);
state.left = state.left || state.position[0].left;
// 获取最终按钮组的宽度
state.width = pageX - state.left;
ins.callMethod('closeSwipe')
}
/**
* 开始滑动操作
* @param {Object} e
* @param {Object} ownerInstance
*/
function touchmove(e, ownerInstance) {
var instance = e.instance;
var disabled = instance.getDataset().disabled
var state = instance.getState()
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
if (disabled) return
var pageX = e.touches[0].pageX;
move(pageX - state.width, instance, ownerInstance)
}
/**
* 结束触摸操作
* @param {Object} e
* @param {Object} ownerInstance
*/
function touchend(e, ownerInstance) {
var instance = e.instance;
var disabled = instance.getDataset().disabled
var state = instance.getState()
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
if (disabled) return
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
moveDirection(state.left, -40, instance, ownerInstance)
}
/**
* 设置移动距离
* @param {Object} value
* @param {Object} instance
* @param {Object} ownerInstance
*/
function move(value, instance, ownerInstance) {
var state = instance.getState()
// 获取可滑动范围
var x = Math.max(-state.position[1].width, Math.min((value), 0));
state.left = x;
instance.setStyle({
transform: 'translateX(' + x + 'px)',
'-webkit-transform': 'translateX(' + x + 'px)'
})
// 折叠按钮动画
buttonFold(x, instance, ownerInstance)
}
/**
* 移动方向判断
* @param {Object} left
* @param {Object} value
* @param {Object} ownerInstance
* @param {Object} ins
*/
function moveDirection(left, value, ins, ownerInstance) {
var state = ins.getState()
var position = state.position
var isopen = state.isopen
if (!position[1].width) {
openState(false, ins, ownerInstance)
return
}
// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
if (isopen) {
if (-left <= position[1].width) {
openState(false, ins, ownerInstance)
} else {
openState(true, ins, ownerInstance)
}
return
}
// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
if (left <= value) {
openState(true, ins, ownerInstance)
} else {
openState(false, ins, ownerInstance)
}
}
/**
* 设置按钮移动距离
* @param {Object} value
* @param {Object} instance
* @param {Object} ownerInstance
*/
function buttonFold(value, instance, ownerInstance) {
var ins = ownerInstance.selectAllComponents('.button-hock');
var state = instance.getState();
var position = state.position;
var arr = [];
var w = 0;
for (var i = 0; i < ins.length; i++) {
if (!ins[i].getDataset().button) return
var btnData = JSON.parse(ins[i].getDataset().button)
// fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
if (typeof(btnData) === 'string') {
btnData = JSON.parse(btnData)
}
var button = btnData[i] && btnData[i].width || 0
w += button
arr.push(-w)
// 动态计算按钮组每个按钮的折叠动画移动距离
var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
if (i != 0) {
ins[i].setStyle({
transform: 'translateX(' + distance + 'px)',
})
}
}
}
/**
* 开启状态
* @param {Boolean} type
* @param {Object} ins
* @param {Object} ownerInstance
*/
function openState(type, ins, ownerInstance) {
var state = ins.getState()
var position = state.position
if (state.isopen === undefined) {
state.isopen = false
}
// 只有状态有改变才会通知页面改变状态
if (state.isopen !== type) {
// 通知页面,已经打开
ownerInstance.callMethod('change', {
open: type
})
}
// 设置打开和移动状态
state.isopen = type
// 添加动画类
ins.addClass('ani');
var owner = ownerInstance.selectAllComponents('.button-hock')
for (var i = 0; i < owner.length; i++) {
owner[i].addClass('ani');
}
// 设置最终移动位置
move(type ? -position[1].width : 0, ins, ownerInstance)
}
module.exports = {
sizeReady: sizeReady,
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend
}
mpalipay.js
export default {
data() {
return {
isshow: false,
viewWidth: 0,
buttonWidth: 0,
disabledView: false,
x: 0,
transition: false
}
},
watch: {
show(newVal) {
if (this.autoClose) return
if (newVal) {
this.open()
} else {
this.close()
}
},
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
beforeDestroy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
mounted() {
this.isopen = false
this.transition = true
setTimeout(() => {
this.getQuerySelect()
}, 50)
},
methods: {
onClick(index, item) {
this.$emit('click', {
content: item,
index
})
},
touchstart(e) {
let {
pageX,
pageY
} = e.changedTouches[0]
this.transition = false
this.startX = pageX
if (this.autoClose) {
this.swipeaction.closeOther(this)
}
},
touchmove(e) {
let {
pageX,
} = e.changedTouches[0]
this.slide = this.getSlide(pageX)
if (this.slide === 0) {
this.disabledView = false
}
},
touchend(e) {
this.stop = false
this.transition = true
if (this.isopen) {
if (this.moveX === -this.buttonWidth) {
this.close()
return
}
this.move()
} else {
if (this.moveX === 0) {
this.close()
return
}
this.move()
}
},
open() {
this.x = this.moveX
this.$nextTick(() => {
this.x = -this.buttonWidth
this.moveX = this.x
if(!this.isopen){
this.isopen = true
this.$emit('change', true)
}
})
},
close() {
this.x = this.moveX
this.$nextTick(() => {
this.x = 0
this.moveX = this.x
if(this.isopen){
this.isopen = false
this.$emit('change', false)
}
})
},
move() {
if (this.slide === 0) {
this.open()
} else {
this.close()
}
},
onChange(e) {
let x = e.detail.x
this.moveX = x
if (x >= this.buttonWidth) {
this.disabledView = true
this.$nextTick(() => {
this.x = this.buttonWidth
})
}
},
getSlide(x) {
if (x >= this.startX) {
this.startX = x
return 1
} else {
this.startX = x
return 0
}
},
getQuerySelect() {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.viewWidth-hook').boundingClientRect(data => {
this.viewWidth = data[0].width
this.buttonWidth = data[1].width
this.transition = false
this.$nextTick(() => {
this.transition = true
})
if (!this.buttonWidth) {
this.disabledView = true
}
if (this.autoClose) return
if (this.show) {
this.open()
}
}).exec();
}
}
}
mpother.js
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
export default {
data() {
return {
uniShow: false,
left: 0
}
},
computed: {
moveLeft() {
return `translateX(${this.left}px)`
}
},
watch: {
show(newVal) {
if (!this.position || JSON.stringify(this.position) === '{}') return;
if (this.autoClose) return
if (newVal) {
this.$emit('change', true)
this.open()
} else {
this.$emit('change', false)
this.close()
}
}
},
mounted() {
this.position = {}
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
setTimeout(() => {
this.getSelectorQuery()
}, 100)
},
beforeDestoy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
onClick(index, item) {
this.$emit('click', {
content: item,
index
})
this.close()
},
touchstart(e) {
const {
pageX
} = e.touches[0]
if (this.disabled) return
const left = this.position.content.left
if (this.autoClose) {
this.swipeaction.closeOther(this)
}
this.width = pageX - left
if (this.isopen) return
if (this.uniShow) {
this.uniShow = false
this.isopen = true
this.openleft = this.left + this.position.button.width
}
},
touchmove(e, index) {
if (this.disabled) return
const {
pageX
} = e.touches[0]
this.setPosition(pageX)
},
touchend() {
if (this.disabled) return
if (this.isopen) {
this.move(this.openleft, 0)
return
}
this.move(this.left, -40)
},
setPosition(x, y) {
if (!this.position.button.width) {
return
}
// this.left = x - this.width
this.setValue(x - this.width)
},
setValue(value) {
// 设置最大最小值
this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
this.position.content.left = this.left
if (this.isopen) {
this.openleft = this.left + this.position.button.width
}
},
move(left, value) {
if (left >= value) {
this.$emit('change', false)
this.close()
} else {
this.$emit('change', true)
this.open()
}
},
open() {
this.uniShow = true
this.left = -this.position.button.width
this.setValue(-this.position.button.width)
},
close() {
this.uniShow = true
this.setValue(0)
setTimeout(() => {
this.uniShow = false
this.isopen = false
}, 300)
},
getSelectorQuery() {
// #ifndef APP-NVUE
const views = uni.createSelectorQuery()
.in(this)
views
.selectAll('.selector-query-hock')
.boundingClientRect(data => {
this.position.content = data[1]
this.position.button = data[0]
if (this.autoClose) return
if (this.show) {
this.open()
} else {
this.close()
}
})
.exec()
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
if (this.position.content) return
this.position.content = data.size
})
dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
if (this.position.button) return
this.position.button = data.size
if (this.autoClose) return
if (this.show) {
this.open()
} else {
this.close()
}
})
// #endif
}
}
}
mpwxs.js
export default {
data() {
return {
position: [],
button: []
}
},
computed: {
pos() {
return JSON.stringify(this.position)
},
btn() {
return JSON.stringify(this.button)
}
},
watch: {
show(newVal) {
if (this.autoClose) return
let valueObj = this.position[0]
if (!valueObj) {
this.init()
return
}
valueObj.show = newVal
this.$set(this.position, 0, valueObj)
}
},
created() {
if (this.swipeaction.children !== undefined) {
this.swipeaction.children.push(this)
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.swipeaction.children.forEach((item, index) => {
if (item === this) {
this.swipeaction.children.splice(index, 1)
}
})
},
methods: {
init() {
setTimeout(() => {
this.getSize()
this.getButtonSize()
}, 50)
},
closeSwipe(e) {
if (!this.autoClose) return
this.swipeaction.closeOther(this)
},
change(e) {
this.$emit('change', e.open)
let valueObj = this.position[0]
if (valueObj.show !== e.open) {
valueObj.show = e.open
this.$set(this.position, 0, valueObj)
}
},
onClick(index, item) {
this.$emit('click', {
content: item,
index
})
},
getSize() {
const views = uni.createSelectorQuery().in(this)
views
.selectAll('.selector-query-hock')
.boundingClientRect(data => {
if (this.autoClose) {
data[0].show = false
} else {
data[0].show = this.show
}
this.position = data
})
.exec()
},
getButtonSize() {
const views = uni.createSelectorQuery().in(this)
views
.selectAll('.button-hock')
.boundingClientRect(data => {
this.button = data
})
.exec()
}
}
}
uni-swipe-action-item.vue
<template>
<view class="uni-swipe">
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
<view class="uni-swipe_content">
<view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
@touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
<view class="uni-swipe_box">
<slot />
</view>
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
backgroundColor: 'transparent',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{
color: item.style && item.style.color ? item.style.color : '#FFFFFF',
width:'80rpx',
height:'80rpx',
backgroundColor:item.style && item.style.backgroundColor ? item.style.backgroundColor : 'red',
borderRadius:'40rpx',
backgroundImage: item.style && item.style.backgroundImage ? item.style.backgroundImage : ''}">{
{ item.text }}</text></view>
</view>
</view>
</view>
<!-- #endif -->
<!-- app nvue端 使用 bindingx -->
<!-- #ifdef APP-NVUE -->
<view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
<view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
class="uni-swipe_button " @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{
{ item.text }}</text></view>
</view>
<view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
<view class="uni-swipe_box">
<slot />
</view>
</view>
</view>
<!-- #endif -->
<!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || H5 -->
<view class="uni-swipe_content">
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{
{ item.text }}</text></view>
</view>
<view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
@touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
<view class="uni-swipe_move-box" >
<view class="uni-swipe_box">
<slot />
</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<view class="viewWidth-hook">
<movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
<movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
:class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
<view class="movable-view-box">
<slot></slot>
</view>
</movable-view>
</movable-area>
</view>
<view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}"
class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{
{ item.text }}</text></view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script src="./index.wxs" module="swipe" lang="wxs"></script>
<script>
// #ifdef APP-VUE|| MP-WEIXIN || H5
import mpwxs from './mpwxs'
// #endif
// #ifdef APP-NVUE
import bindingx from './bindingx.js'
// #endif
// #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
import mixins from './mpother'
// #endif
// #ifdef MP-ALIPAY
import mpalipay from './mpalipay'
// #endif
/**
* SwipeActionItem 滑动操作子组件
* @description 通过滑动触发选项的容器
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
* @property {Boolean} show = [true|false] 开启关闭组件，auto-close = false 时生效
* @property {Boolean} disabled = [true|false] 是否禁止滑动
* @property {Boolean} autoClose = [true|false] 其他组件开启的时候，当前组件是否自动关闭
* @property {Array} options 组件选项内容及样式
* @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
* @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
*/
export default {
// #ifdef APP-VUE|| MP-WEIXIN||H5
mixins: [mpwxs],
// #endif
// #ifdef APP-NVUE
mixins: [bindingx],
// #endif
// #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
mixins: [mixins],
// #endif
// #ifdef MP-ALIPAY
mixins: [mpalipay],
// #endif
props: {
/**
* 按钮内容
*/
options: {
type: Array,
default () {
return []
}
},
/**
* 禁用
*/
disabled: {
type: Boolean,
default: false
},
/**
* 变量控制开关
*/
show: {
type: Boolean,
default: false
},
/**
* 是否自动关闭
*/
autoClose: {
type: Boolean,
default: true
}
},
inject: ['swipeaction']
}
</script>
<style lang="scss" scoped>
.uni-swipe {
overflow: hidden;
}
.uni-swipe-box {
position: relative;
width: 100%;
}
.uni-swipe_content {
flex: 1;
position: relative;
}
.uni-swipe_move-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: relative;
flex-direction: row;
}
.uni-swipe_box {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: row;
width: 100%;
flex-shrink: 0;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
font-size: 14px;
background-color: #fff;
}
.uni-swipe_button-group {
/* #ifndef APP-VUE|| MP-WEIXIN||H5 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
flex-shrink: 0;
/* #endif */
flex-direction: row;
}
.uni-swipe_button {
/* #ifdef APP-NVUE */
position: absolute;
left: 0;
top: 0;
bottom: 0;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.uni-swipe_button-text {
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
font-size: 14px;
background-position: center;
background-size: contain;
}
.ani {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* #ifdef MP-ALIPAY */
.movable-area {
width: 300px;
height: 100%;
height: 45px;
}
.movable-view {
position: relative;
width: 160%;
height: 45px;
z-index: 2;
}
.transition {
transition: all 0.3s;
}
.movable-view-box {
width: 100%;
height: 100%;
background-color: #fff;
}
/* #endif */
</style>
index.vue
<template>
<view class="content">
<view class="list" v-for="(item, index) in list" :key="index">
<uni-swipe-action>
<uni-swipe-action-item :options="options" @click="deleteItem(index)">
<div class="item">{
{item}}</div>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
</view>
</template>
<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
export default {
components: {
uniSwipeAction,
uniSwipeActionItem
},
data() {
return {
list: [
'one one one one one',
'two two two two two',
'three three three three three',
'four four four four four',
'five five five five five',
'six six six six six',
'seven seven seven seven seven',
'eight eight eight eight eight'
],
options: [{
style: {
backgroundImage: 'url("/static/delete.png")'
}
}],
}
},
methods: {
deleteItem (index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #F2F2F2;
}
.list {
width: 750rpx;
margin: 20rpx 0 0 0;
}
.item {
font-size: 36rpx;
color: #000000;
}
</style>
边栏推荐
- 数字签名标准（DSS）
- 行锁分析和死锁
- in和exsits、count(*)查询优化
- In and exceptions, count (*) query optimization
- Let torch cuda. is_ Experience of available() changing from false to true
- 数据加密标准DES安全性
- Interview key points that must be mastered index and affairs (with B-tree and b+ tree)
- Publish message publishers and subscribe message subscribers of ROS
- Conditional compilation in precompiling instructions
- Binary search-2
猜你喜欢
Deep understanding of MySQL lock and transaction isolation level
贝叶斯网络详解
RSA encryption and decryption details
Decision tree and random forest
RSA加密解密详解
RSA concept explanation and tool recommendation - LMN
Leetcode interview question 29 clockwise print matrix
Concept and working principle of data encryption standard (DES)
深入理解MySQL锁与事务隔离级别
Connected to surface test questions
随机推荐
50行代码爬取Top500图书导入TXT文档
同花顺开户怎么样安全吗？怎么炒股开户
Numpy之matplotlib
Applet setting button sharing function
Leetcode 238 product of arrays other than itself
[QNX] Command
Class inheritance of 25class
No manual prior is required! HKU & Tongji & lunarai & Kuangshi proposed self supervised visual representation learning based on semantic grouping, which significantly improved the tasks of target dete
你了解如何比较两个对象吗
JVM入个门（1）
Concept and working principle of data encryption standard (DES)
Do you know how to compare two objects
CLion断点单步调试
RuntimeError: CUDA error: out of memory自己的解决方法(情况比较特殊估计对大部分人不适用)
非对称密码体制详解
数据加密标准DES安全性
Enter n integers and output the number of occurrences greater than or equal to half the length of the array
输入n个整数，输出出现次数大于等于数组长度一半的数
Plt How to keep show() not closed
Summary of alter operation in SQL