good/xhs-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
熊潇
2025-09-14 00:21:54 +08:00
commit d40b3bbd62
766 changed files with 36275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
xhs-mini-demos/component-case/event/event.css Normal file
View File

@@ -0,0 +1,127 @@
.container {
padding-bottom: 20px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.center {
justify-content: center;
align-items: center;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.text-container {
width: 100%;
white-space: pre-line;
margin-bottom: 10px;
}
.box text {
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
.box1 {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
border-radius: 5px;
text-align: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
border-radius: 5px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
border-radius: 5px;
}
.transitionbox {
width: 200px;
height: 200px;
background-color: grey;
margin: 0 auto;
transition: all 0.3s ease;
border-radius: 5px;
}
.transitionbox:hover {
width: 300px;
/* height: 300px; */
background-color: grey;
margin: 0 auto;
}
@keyframes fadeOutIn {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animationbox {
width: 200px;
height: 200px;
background-color: khaki;
margin: 0 auto;
border-radius: 5px;
}
.animation {
animation: fadeOutIn 2s ease;
animation-iteration-count: 2;
}
.wrapper {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.info-panel {
display: flex;
flex-flow: column;
align-items: center;
}
.info-panel > text {
display: block;
margin-bottom: 10px;
}
.info-panel > button {
margin-bottom: 10px;
width: 100%;
}

192
xhs-mini-demos/component-case/event/event.js Normal file
View File

@@ -0,0 +1,192 @@
Page({
data: {
// 手势事件测试
tapCount: 0,
longTapCount: 0,
longPressCount: 0,
touchStartCount: 0,
touchMoveCount: 0,
touchEndCount: 0,
touchCancelCount: 0,
// 动态事件测试
tapVariable: {
a: 'handleTapA',
},
// 冒泡事件测试
eventList1: [],
eventList2: [],
eventList3: [],
// 动画事件测试
animationClass: 'animationbox',
},
handleTapCount() {
this.setData({
tapCount: this.data.tapCount + 1
});
},
handleLongTapCount() {
this.setData({
longTapCount: this.data.longTapCount + 1
});
},
handleLongPressCount() {
this.setData({
longPressCount: this.data.longPressCount + 1
});
},
handleTouchStartCount() {
this.setData({
touchStartCount: this.data.touchStartCount + 1
});
},
handleTouchMoveCount() {
this.setData({
touchMoveCount: this.data.touchMoveCount + 1
});
},
handleTouchEndCount() {
this.setData({
touchEndCount: this.data.touchEndCount + 1
});
},
switchTap() {
this.setData({
'tapVariable.a': this.data.tapVariable.a === 'handleTapA' ? 'handleTapB' : 'handleTapA'
});
},
handleTapA() {
xhs.showToast({
title: 'handleTapA'
});
},
handleTapB() {
xhs.showToast({
title: 'handleTapB'
});
},
handleAnimation() {
if (this.data.animationClass === 'animationbox') {
this.setData({
animationClass: 'animationbox animation'
});
} else {
this.setData({
animationClass: 'animationbox'
});
}
},
handleAnimationStart(event) {
console.log('handleAnimationStart', event);
xhs.showToast({
title: 'animation start'
});
},
handleAnimationIteration(event) {
console.log('handleAnimationIteration', event);
xhs.showToast({
title: 'animation iteration'
});
},
handleAnimationEnd(event) {
console.log('handleAnimationEnd', event);
xhs.showToast({
title: 'animation end'
});
this.handleAnimation();
},
handleTransitionEnd(event) {
console.log('handleTransitionEnd', event);
xhs.showToast({
title: 'transition end'
});
},
handleLongTap() {
console.log('handleLongTap');
},
handleBoxTap(event) {
console.log('handleBoxTap', event.target.dataset.id);
},
handleEvent(event) {
console.log('handleEvent', event);
},
handleBoxTap1(event) {
const eventList1 = this.data.eventList1;
eventList1.push(event.currentTarget.dataset.id);
this.setData({
eventList1,
});
},
clearTap1() {
this.setData({
eventList1: [],
});
},
handleBoxTap2(event) {
const eventList2 = this.data.eventList2;
eventList2.push(event.currentTarget.dataset.id);
this.setData({
eventList2
});
},
clearTap2() {
this.setData({
eventList2: [],
});
},
handleBoxTap3(event) {
const eventList3 = this.data.eventList3;
eventList3.push(event.currentTarget.dataset.id);
this.setData({
eventList3,
});
},
clearTap3() {
this.setData({
eventList3: [],
});
},
handleAnimationAPIStart() {
var animation = xhs.createAnimation({
duration: 1000,
timingFunction: 'ease',
});
this.animation = animation;
animation.scale(2, 2).rotate(45).step();
this.setData({
animationData: animation.export()
});
setTimeout(function () {
animation.translate(30).step();
this.setData({
animationData: animation.export()
});
}.bind(this), 1000);
},
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step();
this.animation.scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step();
this.animation.translate(100, 100).step({ duration: 1000 });
this.setData({
animationData: this.animation.export()
});
}
});

7
xhs-mini-demos/component-case/event/event.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "手势和动画事件",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

187
xhs-mini-demos/component-case/event/event.xhsml Normal file
View File

@@ -0,0 +1,187 @@
<view class="container">
<showbox title="手势事件测试">
<box>
<view class="info-panel">
<text>tap count: {{ tapCount }}</text>
<text>longtap count: {{ longTapCount }}</text>
<text>longpress count: {{ longPressCount }}</text>
<text>touchstart count: {{ touchStartCount }}</text>
<text>touchmove count: {{ touchMoveCount }}</text>
<text>touchend count: {{ touchEndCount }}</text>
<text>touchcancel count: {{ touchCancelCount }}</text>
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handleTapCount"
bind:longtap="handleLongTapCount"
bind:longpress="handleLongPressCount"
bind:touchstart="handleTouchStartCount"
bind:touchmove="handleTouchMoveCount"
bind:touchend="handleTouchEndCount"
>
用我测试手势 👀
</button>
</box>
</showbox>
<showbox title="绑定动态事件回调函数">
<box>
<view class="info-panel">
<button bindtap="switchTap">点我切换绑定的tap函数</button>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="{{ tapVariable.a }}"
>
{{ tapVariable.a }}
</button>
</view>
</box>
</showbox>
<showbox title="手势事件冒泡">
<box>
<view class="text-container">
{{ eventList1.join(', ') }}
</view>
<view
class="box box1"
bind:tap="handleBoxTap1"
data-id="box1"
id="box111"
>
<text>box1, bindtap</text>
<view
class="box box2"
bind:tap="handleBoxTap1"
data-id="box2"
>
<text>box2, bindtap</text>
<view
class="box box3"
bind:tap="handleBoxTap1"
data-id="box3"
>
<text>box3, bindtap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap1">清空</button>
</box>
</showbox>
<showbox title="事件捕获capture">
<box>
<view class="text-container">
{{ eventList2.join(', ') }}
</view>
<view
class="box box1"
capture-bind:tap="handleBoxTap2"
data-id="box1"
>
<text>capture-bind:tap</text>
<view
class="box box2"
capture-bind:tap="handleBoxTap2"
data-id="box2"
>
<text>capture-bind:tap</text>
<view
class="box box3"
capture-bind:tap="handleBoxTap2"
data-id="box3"
>
<text>capture-bind:tap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap2">清空</button>
</box>
</showbox>
<showbox title="事件冒泡和阻止冒泡的组合">
<box>
<view class="text-container">
{{ eventList3.join(', ') }}
</view>
<view
class="box box1"
bind:tap="handleBoxTap3"
data-id="box1"
>
<text>bindtap</text>
<view
class="box box2"
catch:tap="handleBoxTap3"
data-id="box2"
>
<text>catchtap</text>
<view
class="box box3"
bind:tap="handleBoxTap3"
data-id="box3"
>
<text>bindtap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap3">清空</button>
</box>
</showbox>
<showbox title="css animation">
<box>
<view
bindanimationstart="handleAnimationStart"
bindanimationiteration="handleAnimationIteration"
bindanimationend="handleAnimationEnd"
class="{{ animationClass }}"
>
</view>
<button
class="_ui-button mt-10"
bindtap="handleAnimation"
>
开始动画
</button>
</box>
</showbox>
<showbox title="css transition">
<box>
<view
bindtransitionend="handleTransitionEnd"
data-type="transitionend"
class="transitionbox"
></view>
</box>
</showbox>
<showbox title="animation API">
<box>
<view class="wrapper">
<view
bindanimationend="handleAnimationEnd"
bindanimationstart="handleAnimationStart"
animation="{{ animationData }}"
bindtransitionend="handleTransitionEnd"
style="background: red; height: 100rpx; width: 100rpx"
></view>
</view>
<button
class="mt-10"
bindtap="handleAnimationAPIStart"
>
开始动画
</button>
</box>
</showbox>
<showbox
title="自定义组件动画事件测试"
bindtransitionend="handleTransitionEnd"
class="transitionbox"
>
</showbox>
</view>