163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<template>
|
||
<view>
|
||
<nav-bar title="滑动操作"></nav-bar>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<view class="table_box">
|
||
<view class="table_head">
|
||
<text>组件参数</text>
|
||
<text>类型</text>
|
||
<text>描述</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>options</text>
|
||
<text>Array</text>
|
||
<text> [{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}}]</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>disabled</text>
|
||
<text>Boolean</text>
|
||
<text>默认false ，是否禁止滑动</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>show</text>
|
||
<text>Boolean</text>
|
||
<text>默认false ，是否打开</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>autoClose</text>
|
||
<text>Boolean</text>
|
||
<text>默认true ，是否自动关闭</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>index</text>
|
||
<text>Number</text>
|
||
<text>默认0 ，索引值，通过@button传递出去</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>@button</text>
|
||
<text>function</text>
|
||
<text>左滑按钮点击事件</text>
|
||
</view>
|
||
</view>
|
||
<view class="swipe_action_list">
|
||
<swipe-action :options="options" :show="show"><view class="swipe_action">滑动</view></swipe-action>
|
||
</view>
|
||
<view class="swipe_action_list">
|
||
<swipe-action :options="options2" disabled><view class="swipe_action">禁止滑动</view></swipe-action>
|
||
</view>
|
||
<view v-for="(item, index) of 3" :key="index" class="swipe_action_list">
|
||
<swipe-action :options="options3" :index="index" @button="onButton">
|
||
<view class="swipe_action">滑动列表{{ index + 1 }}</view>
|
||
</swipe-action>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import swipeAction from '@/components/common/swipe-action';
|
||
import navBar from '@/components/common/zhouWei-navBar';
|
||
export default {
|
||
components: {
|
||
swipeAction,
|
||
navBar
|
||
},
|
||
data() {
|
||
return {
|
||
options: [
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
},
|
||
{
|
||
text: '取消',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
},
|
||
{
|
||
text: '确认',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
}
|
||
],
|
||
options2: [
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
}
|
||
],
|
||
options3: [
|
||
{
|
||
text: '取消',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
},
|
||
{
|
||
text: '确认',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
}
|
||
],
|
||
show: true
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
setInterval(() => {
|
||
this.show = !this.show;
|
||
}, 5000);
|
||
},
|
||
//页面显示
|
||
onShow() {},
|
||
//方法
|
||
methods: {
|
||
onPageJump(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
},
|
||
onButton(e) {
|
||
uni.showToast({
|
||
title: '您点击了滑动列表' + (e.index + 1) + '的第' + (e.buttonIndex + 1) + '个按钮，按钮为‘' + e.content.text + '’',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
//页面隐藏
|
||
onHide() {},
|
||
//页面卸载
|
||
onUnload() {},
|
||
//页面下来刷新
|
||
onPullDownRefresh() {},
|
||
//页面上拉触底
|
||
onReachBottom() {},
|
||
//用户点击分享
|
||
onShareAppMessage(e) {
|
||
return this.wxShare();
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.swipe_action_list {
|
||
border-bottom-width: 2rpx;
|
||
border-bottom-color: #eee;
|
||
border-bottom-style: solid;
|
||
}
|
||
.swipe_action {
|
||
background-color: #ffffff;
|
||
padding: 50rpx 30rpx;
|
||
}
|
||
</style>
|