349 lines
9.5 KiB
Vue
349 lines
9.5 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="slide-box" v-for="(item, index) in listData" :key="index">
|
||
<view class="slide-list" @touchstart="touchStart($event, index)" @touchend="touchEnd($event, index)"
|
||
@touchmove="touchMove($event, index)" @tap="recover(index)"
|
||
:style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
|
||
<view class="now-message-info" hover-class="uni-item--hover" :style="{ width: windowWidth + 'px' }"
|
||
@click="clickItemMethod(item)">
|
||
<view class="list">
|
||
<view class="item" :class="[type!=1?'leftChild':'']">
|
||
<view class="time">
|
||
<icon class="t-icon t-icon-shijian-mianxing-0"></icon>
|
||
<text>{{item.createtime}}</text>
|
||
</view>
|
||
<view>{{item.weight}}<text>体重</text></view>
|
||
<view>{{item.bmi}}<text>BMI</text></view>
|
||
<view>{{item.fat_r}}<text>脂肪率</text></view>
|
||
<icon class="iconfont icon-arrow-right"></icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="group-btn">
|
||
<view class="btn-div" v-for="(value, key) in button" :key="key" @click="clickMethod(item)"
|
||
:style="{background: value.background}">
|
||
{{value.title}}
|
||
</view>
|
||
</view>
|
||
<view style="clear:both"></view>
|
||
</view>
|
||
<view class="list-item-border" v-if="border"></view>
|
||
</view>
|
||
<!-- <view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* m-slide-list 滑动操作列表
|
||
* @description 滑动操作列表组件
|
||
* @tutorial https://ext.dcloud.net.cn/plugin?id=209
|
||
* @property {Array} list 数据源，格式为：[{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0},{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0}]
|
||
* @property {Array} button 按钮数据源，格式为：[{title: 'xxx', background:'xxx'},{title: 'xxx', background:'xxx'}]
|
||
* @property {Boolean} border 边框
|
||
*/
|
||
export default {
|
||
name: 'mark-slide-list',
|
||
props: {
|
||
list: { //数据list
|
||
type: Array,
|
||
default () {
|
||
return [];
|
||
}
|
||
},
|
||
button: { //按钮数据list
|
||
type: Array,
|
||
default () {
|
||
return [{
|
||
title: '删除',
|
||
background: '#ff3b32'
|
||
}];
|
||
}
|
||
},
|
||
border: { //边框
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: null
|
||
},
|
||
id: {
|
||
type: String,
|
||
default: null
|
||
}
|
||
},
|
||
computed: {
|
||
windowWidth() {
|
||
return uni.getSystemInfoSync().windowWidth;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
listData: [],
|
||
start_slide_x: 0,
|
||
btnWidth: 0,
|
||
startX: 0,
|
||
LastX: 0,
|
||
startTime: 0,
|
||
itemIndex: 0,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.listData = this.clone(this.list)
|
||
// this.getList(1)
|
||
},
|
||
watch: {
|
||
list: {
|
||
handler: function(val, oldval) {
|
||
this.listData = this.clone(this.list)
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
clone(data) {
|
||
const type = typeof data
|
||
let obj;
|
||
if (type === 'array') {
|
||
obj = [];
|
||
} else if (type === 'object') {
|
||
obj = {};
|
||
} else {
|
||
// 不再具有下一层次
|
||
return data;
|
||
}
|
||
if (type === 'array') {
|
||
for (let i = 0, len = data.length; i < len; i++) {
|
||
obj.push(this.clone(data[i]));
|
||
}
|
||
} else if (type === 'object') {
|
||
// 对原型上的方法也拷贝了....
|
||
for (const key in data) {
|
||
obj[key] = this.clone(data[key]);
|
||
}
|
||
}
|
||
return obj;
|
||
},
|
||
|
||
// 滑动开始
|
||
touchStart(e, index) {
|
||
if (this.itemIndex == index) {
|
||
this.itemIndex = index
|
||
}
|
||
//记录手指放上去的时间
|
||
this.startTime = e.timeStamp;
|
||
//记录滑块的初始位置
|
||
this.start_slide_x = this.listData[index].slide_x;
|
||
// 按钮宽度
|
||
//#ifdef MP-WEIXIN
|
||
uni.createSelectorQuery().in(this).selectAll('.group-btn').boundingClientRect(res => {
|
||
if (res != null) {
|
||
this.btnWidth = res[index].width * -1;
|
||
}
|
||
}).exec();
|
||
//#endif
|
||
//#ifdef H5 || APP-PLUS
|
||
uni.createSelectorQuery()
|
||
.selectAll('.group-btn')
|
||
.boundingClientRect()
|
||
.exec(res => {
|
||
if (res[0] != null) {
|
||
this.btnWidth = res[0][index].width * -1;
|
||
}
|
||
});
|
||
//#endif
|
||
// 记录上一次开始时手指所处位置
|
||
this.startX = e.touches[0].pageX;
|
||
// 记录上一次手指位置
|
||
this.lastX = this.startX;
|
||
//初始化非当前滑动消息列的位置
|
||
for (var i in this.listData) {
|
||
if (index != i) {
|
||
this.listData[i].slide_x = 0;
|
||
}
|
||
}
|
||
},
|
||
// 滑动中
|
||
touchMove(e, index) {
|
||
const endX = e.touches[0].pageX;
|
||
const distance = endX - this.lastX;
|
||
// 预测滑块所处位置
|
||
const duang = this.listData[index].slide_x + distance;
|
||
// 如果在可行区域内
|
||
if (duang <= 0 && duang >= this.btnWidth) {
|
||
this.listData[index].slide_x = duang;
|
||
}
|
||
// 此处手指所处位置将成为下次手指移动时的上一次位置
|
||
this.lastX = endX;
|
||
},
|
||
// 滑动结束
|
||
touchEnd(e, index) {
|
||
let distance = 10;
|
||
const endTime = e.timeStamp;
|
||
const x_end_distance = this.startX - this.lastX;
|
||
if (Math.abs(endTime - this.startTime) > 200) {
|
||
distance = this.btnWidth / -2;
|
||
}
|
||
// 判断手指最终位置与手指开始位置的位置差距
|
||
if (x_end_distance > distance) {
|
||
this.listData[index].slide_x = this.btnWidth;
|
||
} else if (x_end_distance < distance * -1) {
|
||
this.listData[index].slide_x = 0;
|
||
} else {
|
||
this.listData[index].slide_x = this.start_slide_x;
|
||
}
|
||
},
|
||
// 点击回复原状
|
||
recover(index) {
|
||
this.listData[index].slide_x = 0;
|
||
},
|
||
/**
|
||
* 点击按钮触发事件
|
||
* @param {Object} item 列表数据
|
||
* @param {Object} buttonItem 按钮数据
|
||
* @param {Object} index 列表数据key
|
||
*/
|
||
clickMethod(item) {
|
||
if (this.list.length == 1) {
|
||
this.$tools.msg("只剩一条记录了，不可以删除！")
|
||
return
|
||
}
|
||
this.$emit("changeDelete", item)
|
||
},
|
||
// 详情
|
||
clickItemMethod(item) {
|
||
uni.navigateTo({
|
||
url: "/pageTwo/me/info?index=" + JSON.stringify(item)
|
||
})
|
||
// this.$emit("click", item)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
.slide-box {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.list-item-border {
|
||
width: 100%;
|
||
}
|
||
|
||
.slide-list {
|
||
transition: all 100ms;
|
||
transition-timing-function: ease-out;
|
||
min-width: 200%;
|
||
|
||
.now-message-info {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
clear: both;
|
||
padding: 0 30rpx;
|
||
background: #f7f7f7;
|
||
float: left;
|
||
|
||
.icon-image {
|
||
border-radius: 10rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
float: left;
|
||
}
|
||
|
||
.icon-circle {
|
||
background: #3396fb;
|
||
border-radius: 100%;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
float: left;
|
||
}
|
||
|
||
.list-right {
|
||
float: left;
|
||
margin-left: 25rpx;
|
||
margin-right: 30rpx;
|
||
|
||
.list-title {
|
||
width: 350rpx;
|
||
line-height: 1.5;
|
||
overflow: hidden;
|
||
margin-bottom: 10rpx;
|
||
color: #333;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-detail {
|
||
width: 350rpx;
|
||
font-size: 14px;
|
||
color: #a9a9a9;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.list-right-1 {
|
||
float: right;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
color: #a9a9a9;
|
||
}
|
||
}
|
||
|
||
.group-btn {
|
||
float: left;
|
||
display: flex;
|
||
flex-direction: row;
|
||
min-width: 100rpx;
|
||
align-items: center;
|
||
margin-top: 6rpx;
|
||
|
||
.btn-div {
|
||
height: 100rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 0 50rpx;
|
||
font-size: 34rpx;
|
||
line-height: 100rpx;
|
||
border-radius: 5px 0 0 5px;
|
||
}
|
||
|
||
.top {
|
||
background-color: #c4c7cd;
|
||
}
|
||
|
||
.removeM {
|
||
background-color: #ff3b32;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftChild {
|
||
view {
|
||
width: 18%;
|
||
}
|
||
|
||
.time {
|
||
width: 32% !important;
|
||
|
||
|
||
}
|
||
}
|
||
</style>
|