微信小程序鼠标滑动两个view互不影响咋整

Question

这两个盒子，怎么样才可以动一个另一个不跟着动呢，。这个代码，求解答

Answer 1

【以下回答由 GPT 生成】

解决方案：

要实现两个不互相影响的鼠标滑动视图，在微信小程序中可以使用scroll-view组件。根据问题描述，可以将两个盒子分别放在两个独立的scroll-view组件中，设置它们的滑动行为不互相影响。

以下是具体的实现步骤：

1. 在WXML文件（.wxml）中，添加两个scroll-view组件，并为它们设置不同的id。例如： ``` <view>盒子1内容</view>

   <view>盒子2内容</view> ```

2. 在WXSS文件（.wxss）中，可以对scroll-view组件进行样式调整，例如设置宽度、高度等。

3. 在JS文件（.js）中，使用 onTouchMove 事件来监听盒子的滑动，可以使用选择器 wx.createSelectorQuery() 来获取滑动的距离。

   ``` Page({ handleTouchMoveBox1: function (event) { wx.createSelectorQuery().select('#box1').boundingClientRect(function (rect) { console.log(rect.top) // 打印盒子1的滑动距离 }).exec() },

   handleTouchMoveBox2: function (event) {
       wx.createSelectorQuery().select('#box2').boundingClientRect(function (rect) {
           console.log(rect.top) // 打印盒子2的滑动距离
       }).exec()
   }
   

   }) ```

4. 在WXML文件中设置 bindtouchmove 事件，将滑动事件与对应的处理函数绑定。

   ``` <view>盒子1内容</view>

   <view>盒子2内容</view> ```

这样，就实现了两个互不影响的鼠标滑动视图了。

备注：以上给出的是一种通用的实现方法，如果还有其他特殊需求，可以在具体实现中进行调整。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7797665
• 这篇博客也不错, 你可以看下一行代码实现view拖拽移动、双指缩放效果（最顺滑的缩放）
• 除此之外, 这篇博客: 安卓自定义View实现简单折线图中的 量变引起质变 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^