微信小程序点击按钮添加文本框并且点击文本框可以随意拖动
时间: 2023-09-12 07:08:17 浏览: 776
你可以通过以下步骤在微信小程序中实现点击按钮添加文本框并且点击文本框可以随意拖动的功能:
1. 在页面的 WXML 文件中,添加一个按钮和一个空的文本框容器:
```html
<view>
<button bindtap="addTextBox">添加文本框</button>
<view class="text-box-container" bindtouchstart="startDrag" bindtouchmove="onDrag" bindtouchend="endDrag">
<input class="text-box" type="text" value="" />
</view>
</view>
```
2. 在页面的 WXSS 文件中,设置文本框容器的样式,使其可以拖动:
```css
.text-box-container {
position: absolute;
left: 0;
top: 0;
width: 200rpx; /* 设置文本框容器的宽度 */
height: 100rpx; /* 设置文本框容器的高度 */
background-color: #eee;
}
```
3. 在页面的 JS 文件中,添加相应的事件处理函数和变量:
```javascript
Page({
data: {
textBoxes: [], // 存储文本框的数组
startX: 0, // 拖动开始时的横坐标
startY: 0, // 拖动开始时的纵坐标
currentIndex: -1, // 当前拖动的文本框索引
},
addTextBox() {
const textBoxes = this.data.textBoxes;
textBoxes.push({});
this.setData({
textBoxes,
});
},
startDrag(e) {
const currentIndex = e.currentTarget.dataset.index;
this.setData({
startX: e.touches[0].clientX,
startY: e.touches[0].clientY,
currentIndex,
});
},
onDrag(e) {
const { startX, startY, currentIndex } = this.data;
const offsetX = e.touches[0].clientX - startX;
const offsetY = e.touches[0].clientY - startY;
const textBoxes = this.data.textBoxes;
textBoxes[currentIndex].left += offsetX;
textBoxes[currentIndex].top += offsetY;
this.setData({
startX: e.touches[0].clientX,
startY: e.touches[0].clientY,
textBoxes,
});
},
endDrag() {
this.setData({
currentIndex: -1,
});
},
});
```
这样,当点击按钮后,会动态添加一个文本框。用户可以通过点击文本框并拖动来改变文本框的位置。请注意,上述代码仅提供了一个基本的实现思路,具体的样式和交互效果可以根据实际需求进行调整。
阅读全文