110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<template>
|
||
<ciy-header title="ciy-gesture组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">手势包裹组件</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
单指滑动，感知四个方向。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<ciy-gesture :pxlen="props.pxlen" move @tomove="move" @start="evt($event, 'start')" @end="evt($event, 'end')"
|
||
@todown="evt($event, 'todown')" @toup="evt($event, 'toup')" @toright="evt($event, 'toright')" @toleft="evt($event, 'toleft')">
|
||
<view style="height:10em;margin:1em;padding:1em;background: var(--bg1);">滑动区域</view>
|
||
</ciy-gesture>
|
||
|
||
<view class="ciy-card">
|
||
<view class="content">
|
||
<view>move: {{mv}}</view>
|
||
<view>event: {{event}}</view>
|
||
<view>eventdata: {{eventdata}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">move</view>
|
||
<view class="tip">
|
||
是否触发移动事件。<br />
|
||
默认 false
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-switch v-model="props.move"></ciy-switch>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">pxlen</view>
|
||
<view class="tip">
|
||
滑动距离阈值，单位px。
|
||
</view>
|
||
<ciy-input bb v-model="props.pxlen" style="width:4em;"></ciy-input>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@start</view>
|
||
<view class="tip">
|
||
touchstart触发<br />
|
||
第一个手指坐标
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@toleft,toright,todown,toup,end</view>
|
||
<view class="tip">
|
||
touchend触发<br />
|
||
某个方向超过pxlen阈值，则触发to*<br />
|
||
都未超过pxlen阈值，则触发end<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@tomove</view>
|
||
<view class="tip">
|
||
touchmove触发<br />
|
||
相对开始的x，y
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props:{
|
||
pxlen: 40
|
||
},
|
||
event: '',
|
||
eventdata:'',
|
||
mv: {}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
move(e) {
|
||
this.mv = e;
|
||
},
|
||
evt(e,act) {
|
||
this.eventdata = e;
|
||
this.event = act;
|
||
}
|
||
}
|
||
}
|
||
</script> |