|
<template>
<view class="page">
<grid-view id="gView" class="gView" scroll-y={this.data.scrollEnabled} bounces={this.data.scrollEnabled}>
<list-header>
<safe-area></safe-area>
</list-header>
<cell class="cell" data-obj={item} data-index={index}>
<scroll-view
class="cell-scroll-view"
scroll-x="true"
show-scrollbar="false"
bounces="false"
paging-enabled="true"
onscrolltolower="onscrolltolower">
<view class="cell-container">
<text>{{ item.text }}</text>
</view>
<view class="cell-btns" id="btn">
<button>操作1</button>
<button>操作2</button>
</view>
</scroll-view>
</cell>
</grid-view>
</view>
</template>
<script>
import Utils from '../../script/Utils'
export default {
name: 'sdasd',
apiready() {
document.getElementById("gView").load({
data: [{ text: 'dsaaaaaaa' }, { text: 'dsaaaaaaa' }]
})
},
data() {
return {
scrollEnabled: true,
data: [{ text: 'dsaaaaaaa' }, { text: 'dsaaaaaaa' }],
touchId: 0,
handleSwipe: '',
startX: 0, //触摸位置
endX: 0, //结束位置
disX: 0, //移动距离
isHasScrolltolower: false
}
},
methods: {
// touchstart(e) {
// // console.log(JSON.stringify(e.currentTarget.dataset))
// this.data.touchId = e.currentTarget.dataset.index;
// this.data.startX = e.detail.x;
// },
// touchmove(e) {
// this.data.scrollEnabled = false;
// this.data.moveX = e.detail.x;
// this.data.disX = this.data.startX - this.data.moveX;
// this.data.handleSwipe = "transform:translateX(-" + this.data.disX + "px)";
// document.getElementById("gView").update({
// item: e.currentTarget.dataset.obj,
// index: e.currentTarget.dataset.index
// })
// },
// touchend(e) {
// this.data.scrollEnabled = true;
// let wd = document.getElementById('btn').offsetWidth;
// let endX = e.detail.x;
// this.data.disX = this.data.startX - endX;
// if ((this.data.disX) < (wd / 5)) {
// this.data.handleSwipe = "transform:translateX(0px)";
// } else {
// //大于一半 滑动到最大值
// this.data.handleSwipe = "transform:translateX(-" + wd + "px)";
// }
// document.getElementById("gView").update({
// item: e.currentTarget.dataset.obj,
// index: e.currentTarget.dataset.index
// })
// },
onscrolltolower() {
}
}
}
</script>
<style>
.page {
height: 100%;
}
.gView {
flex: 1;
}
.cell {
height: 20vw;
background-color: blue;
}
.cell-scroll-view {
width: 100%;
height: 100%;
}
.cell-container {
z-index: 10;
background-color: #fff;
width: 100%;
height: 100%;
}
.cell-btns {
flex-direction: row;
align-items: center;
/* position: absolute; */
z-index: 1;
right: 0;
width: 50vw;
background-color: red;
}
</style> |
|