first commit
This commit is contained in:
4
uni_modules/cowain-slide-action/changelog.md
Normal file
4
uni_modules/cowain-slide-action/changelog.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## 1.0.3（2023-01-11）
|
||||
1.0.3 完备文档
|
||||
## 1.0.2（2023-01-10）
|
||||
1.0.2
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--
|
||||
* @Author: dfh
|
||||
* @Date: 2023-01-06 16:41:51
|
||||
* @LastEditors: dfh
|
||||
* @Modified By: dfh
|
||||
* @describe: 侧滑删除
|
||||
-->
|
||||
<template>
|
||||
<view class="card-wrap" :style="{
|
||||
width: `calc(100% + ${slideWidth}rpx)`,
|
||||
marginLeft: '-' + slideWidth + 'rpx',
|
||||
transform: isTouchMove ? `translateX(0px)` : `translateX(${slideWidth}rpx)`
|
||||
}">
|
||||
<view class="content" @touchstart="touchStartHandle" @touchend="touchEndHande">
|
||||
<slot name="card" />
|
||||
<slot name="delete" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
slideWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
touchStartX: "",
|
||||
isTouchMove: false, //向左滑动：true,显示删除按钮
|
||||
screenWidth: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const {
|
||||
screenWidth
|
||||
} = uni.getSystemInfoSync();
|
||||
this.screenWidth = screenWidth;
|
||||
console.log(screenWidth);
|
||||
uni.$on("slide-close", () => {
|
||||
console.log("slide-close");
|
||||
this.isTouchMove = false;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
touchStartHandle(e) {
|
||||
this.touchStartX = e.changedTouches[0].clientX;
|
||||
},
|
||||
touchEndHande(e) {
|
||||
const touchStartX = this.touchStartX;
|
||||
const touchEndX = e.changedTouches[0].clientX;
|
||||
//向左滑动touchEndX < touchStartX
|
||||
if (touchStartX - touchEndX > 80) {
|
||||
uni.$emit("slide-close");
|
||||
this.isTouchMove = true;
|
||||
} else {
|
||||
this.isTouchMove = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.card-wrap {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 左移动 */
|
||||
.move-left {
|
||||
transform: translateX(0rpx);
|
||||
}
|
||||
</style>
|
||||
80
uni_modules/cowain-slide-action/package.json
Normal file
80
uni_modules/cowain-slide-action/package.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "cowain-slide-action",
|
||||
"displayName": "侧滑删除",
|
||||
"version": "1.0.3",
|
||||
"description": "侧滑删除，侧滑关注",
|
||||
"keywords": [
|
||||
"侧滑，侧滑删除，侧滑关系"
|
||||
],
|
||||
"repository": "https://github.com/xiyunanhai1028/cowain-slide-action.git",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无权限"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
250
uni_modules/cowain-slide-action/readme.md
Normal file
250
uni_modules/cowain-slide-action/readme.md
Normal file
@@ -0,0 +1,250 @@
|
||||
# cowain-slide-action
|
||||
|
||||
> 滑动操作组件「如：侧滑删除，侧滑关注...」
|
||||
|
||||
## 属性说明
|
||||
|
||||
| 属性 | 描述 |
|
||||
| --------------- | -------------- |
|
||||
| `slide-width` | 侧滑区域的宽度 |
|
||||
| `v-slot:card` | 内容区域 |
|
||||
| `v-slot:delete` | 删除区域 |
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
> 使用示例，实现一个消息列表侧滑删除功能
|
||||
|
||||
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<scroll-view class="scroll-view" scroll-y>
|
||||
<cowain-slide-action :slide-width="90" v-for="(item, index) in list" :key="index">
|
||||
<template v-slot:card>
|
||||
<view class="card" @click="_markRead(item)">
|
||||
<view class="header-wrap">
|
||||
<view class="title-wrap">
|
||||
<view class="dot"></view>
|
||||
<text class="title">{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="time">{{ item.createdTime }}</text>
|
||||
</view>
|
||||
<view class="remark">
|
||||
<text class="msg">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:delete>
|
||||
<view class="delete-wrap">
|
||||
<image src="../../static/icon-delete-card.png" class="icon-delete"
|
||||
@click.stop="onDeleteItemClick(index)" />
|
||||
</view>
|
||||
</template>
|
||||
</cowain-slide-action>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
list: [{
|
||||
"id": "116",
|
||||
"maintenanceCode": "BY220810000002",
|
||||
"title": "工单消息",
|
||||
"type": "care",
|
||||
"createdTime": "2022-08-10 10:09:56",
|
||||
"remark": "收到一个新的【保养工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "120",
|
||||
"maintenanceCode": "WX220820000011",
|
||||
"title": "工单消息",
|
||||
"type": "maintain",
|
||||
"createdTime": "2022-08-10 10:09:56",
|
||||
"remark": "收到一个新的【维修工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "123",
|
||||
"maintenanceCode": "BY220820000002",
|
||||
"title": "工单消息",
|
||||
"type": "care",
|
||||
"createdTime": "2022-08-10 10:09:56",
|
||||
"remark": "收到一个新的【保养工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "124",
|
||||
"maintenanceCode": "WX220820000002",
|
||||
"title": "工单消息",
|
||||
"type": "maintain",
|
||||
"createdTime": "2022-08-10 10:09:56",
|
||||
"remark": "收到一个新的【维修工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "112",
|
||||
"maintenanceCode": "BY220810000001",
|
||||
"title": "工单消息",
|
||||
"type": "care",
|
||||
"createdTime": "2022-08-10 10:08:05",
|
||||
"remark": "收到一个新的【保养工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "115",
|
||||
"maintenanceCode": "WX220810000002",
|
||||
"title": "工单消息",
|
||||
"type": "maintain",
|
||||
"createdTime": "2022-08-10 10:08:05",
|
||||
"remark": "收到一个新的【维修工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "122",
|
||||
"maintenanceCode": "WX220820000022",
|
||||
"title": "工单消息",
|
||||
"type": "maintain",
|
||||
"createdTime": "2022-08-10 10:08:05",
|
||||
"remark": "收到一个新的【维修工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "118",
|
||||
"maintenanceCode": "WX220820000001",
|
||||
"title": "工单消息",
|
||||
"type": "maintain",
|
||||
"createdTime": "2022-08-03 09:52:21",
|
||||
"remark": "收到一个新的【维修工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
},
|
||||
{
|
||||
"id": "121",
|
||||
"maintenanceCode": "BY220804000002",
|
||||
"title": "工单消息",
|
||||
"type": "care",
|
||||
"createdTime": "2022-08-03 09:52:21",
|
||||
"remark": "收到一个新的【保养工单】，点击查看详情。",
|
||||
"isRead": "0"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onDeleteItemClick(index) {
|
||||
uni.showToast({
|
||||
title: `点击了${index}位置`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(245, 246, 248, 1);
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-left: 24rpx;
|
||||
width: 702rpx;
|
||||
height: 171rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
margin-right: 11rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: rgba(222, 11, 11, 1);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
|
||||
.remark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: $txt-black-204;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.msg {
|
||||
width: 540rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.delete-wrap {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
width: 180rpx;
|
||||
height: 171rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.icon-delete {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user