小程序浮窗可滑动

/**js**/

 

Page({

data:{

top  :  ' ' ,

left :  ' ',

windowWidth:'',

windowHeight:''

}

 

//拖动不超过规定范围

setTouchMove: function (e) {

console.log("---------------- e.touches[0].clientX----------------8==" + e.touches[0].clientX)

console.log("---------------- e.touches[0].clientX----------------8=======" + e.touches[0].clientY)

if (e.touches[0].clientX < 650) && e.touches[0].clientY < 1110 && e.touches[0].clientX > 0 && e.touches[0].clientY > 0) {

this.setData({

left: e.touches[0].clientX ,

top: e.touches[0].clientY

})

} else {

this.setData({

left: 650,

top: 1110

})

}

},

})

 

wxml 

<view class="view" style=" top:{{top}}px;left:{{left}}px;margin: 10% 0rpx 0rpx 0%;" bindtouchmove="setTouchMove">

<view>

<image style="height:40px;width:40px;" src="/images/Ings.png"></image>

</view>

</view>

 

wxss

 

.view{

position: fixed ; /*相对定位*/

height:60px;

width:60px;

border-radius:2rem;

background:#999999;

color: white;

text-align: center;

line-height: 60px;

}

 

### QT中滑动条与口的联动效果实现 在 Qt 中,可以通过信号和槽机制来实现 `QSlider` 和其他控件(如 `QDockWidget` 或者 `QWidget` 的大小调整)之间的联动效果。以下是具体的实现方式: #### 1. 使用信号和槽连接滑动条与其他控件 通过将 `QSlider` 的 `valueChanged(int)` 信号连接到目标控件的相关槽函数上,可以实现实时更新的效果。 ```cpp // 创建滑动条对象 QSlider *slider = new QSlider(Qt::Horizontal, this); // 设置滑动条的取值范围 slider->setRange(0, 100); slider->setValue(50); // 初始值设置为中间位置 // 创建一个可停靠的口 QDockWidget *dockWidget = new QDockWidget("口", this); // 假设我们希望 dockWidget 的宽度随滑动条变化而变化 QObject::connect(slider, &QSlider::valueChanged, dockWidget, [dockWidget](int value) { dockWidget->resize(value * 4, dockWidget->height()); // 动态调整宽度 }); ``` 上述代码片段展示了如何利用 Lambda 表达式动态绑定滑动条的变化事件[^1]。每当滑动条的值发生变化时,都会触发 `valueChanged(int)` 信号,并调用对应的槽函数修改 `QDockWidget` 的尺寸[^2]。 #### 2. 示例程序:水平滑动条控制口宽度 下面是一个完整的示例程序,演示了如何让水平滑动条控制一个 (`QDockWidget`) 的宽度。 ```cpp #include <QApplication> #include <QMainWindow> #include <QSlider> #include <QDockWidget> class MainWindow : public QMainWindow { public: MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) { // 初始化滑动条 QSlider *slider = new QSlider(Qt::Horizontal, this); slider->setRange(50, 500); // 定义最小最大宽度 slider->setValue(200); // 默认初始宽度 // 添加滑动条作为主界面的一部分 setCentralWidget(slider); // 创建 DockWindow 并添加到主口 QDockWidget *dockWidget = new QDockWidget("测试口", this); addDockWidget(Qt::RightDockWidgetArea, dockWidget); // 将滑动条的 valueChanged() 信号连接至自定义槽函数 QObject::connect(slider, &QSlider::valueChanged, dockWidget, [dockWidget](int widthValue) { dockWidget->resize(widthValue, dockWidget->size().height()); }); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MainWindow window; window.resize(800, 600); window.show(); return app.exec(); } ``` 此代码创建了一个简单的应用程序,在其中有一个水平方向上的滑动条以及右侧的一个悬浮窗口。当拖拽滑动条时,悬浮窗口会随着其值同步调整自身的宽度[^3]。 #### 3. 扩展功能:双向关联两个滑动条 如果需要更复杂的交互逻辑,比如两个相互影响的滑动条,则可以在两者之间建立双向绑定关系。 ```cpp // 双向关联两个滑动条 QSlider *horizontalSlider = new QSlider(Qt::Horizontal, this); QSlider *verticalSlider = new QSlider(Qt::Vertical, this); horizontalSlider->setOrientation(Qt::Horizontal); verticalSlider->setOrientation(Qt::Vertical); horizontalSlider->setRange(0, 100); verticalSlider->setRange(0, 100); // 关联第一个滑动条到第二个滑动条 QObject::connect(horizontalSlider, &QSlider::valueChanged, verticalSlider, &QSlider::setValue); // 同样也可以反向操作 QObject::connect(verticalSlider, &QSlider::valueChanged, horizontalSlider, &QSlider::setValue); ``` 这样就可以构建出一种更加灵活多变的人机互动体验[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值