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

29
xhs-mini-demos/component-case/movable-area/movable-area.css Normal file
View File

@@ -0,0 +1,29 @@
movable-area {
width: 100%;
height: 218px;
background-color: #fff;
overflow: hidden;
margin: 0;
border: 1px solid #ddd;
}
movable-view {
background-color: rgba(255, 36, 65);
color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
}
.bigger-area {
width: 480px;
height: 280px;
}
.move-button {
margin: 20px;
height: 40px;
}

25
xhs-mini-demos/component-case/movable-area/movable-area.js Normal file
View File

@@ -0,0 +1,25 @@
Page({
data: {
x: 0,
y: 0,
x1: 30,
y1: 30,
},
move() {
this.setData({
x1: 50,
y1: 50,
});
},
scale() {
this.setData({
scale: 3,
});
},
onChange(e) {
console.log(e.detail);
},
onScale(e) {
console.log(e.detail);
},
});

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

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "可移动视图区域",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

74
xhs-mini-demos/component-case/movable-area/movable-area.xhsml Normal file
View File

@@ -0,0 +1,74 @@
<view class="container">
<showbox title="movable-view区域小于movable-area">
<box>
<movable-area>
<movable-view x="{{x1}}" y="{{y1}}" damping="20" disabled="false" direction="all">text</movable-view>
</movable-area>
<button bindtap="move" class="_ui-button _mt8" hover-class="_ui-button-hover">点击移动到 (50px, 50px)</button>
</box>
</showbox>
<showbox title="movable-view区域大于movable-area">
<box>
<movable-area>
<movable-view x="{{x}}" y="{{y}}" class="bigger-area" direction="all">text</movable-view>
</movable-area>
</box>
</showbox>
<showbox title="只可以横向移动">
<box>
<movable-area htouchmove>
<movable-view x="{{x}}" y="{{y}}" direction="horizontal">text</movable-view>
</movable-area>
</box>
</showbox>
<showbox title="只可以纵向移动">
<box>
<movable-area vtouchmove>
<movable-view x="{{x}}" y="{{y}}" direction="vertical">text</movable-view>
</movable-area>
</box>
</showbox>
<showbox title="可超出边界">
<box>
<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all" out-of-bounds>text</movable-view>
</movable-area>
</box>
</showbox>
<showbox title="带有惯性">
<box>
<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all" inertia friction="1">text</movable-view>
</movable-area>
</box>
</showbox>
<showbox title="可放缩">
<box>
<movable-area scale-area="true">
<movable-view
x="{{x}}"
y="{{y}}"
scale
scale-min="0.5"
scale-max="4"
scale-value="{{scale}}"
direction="all"
animation="false"
bindchange="onChange"
bindscale="onScale">
text
</movable-view>
</movable-area>
<button bind:tap="scale" class="_ui-button _mt8" hover-class="_ui-button-hover" type="warn">点击放大3倍</button>
</box>
</showbox>
</view>