微信小程序如何实现view点击时横向移动
时间: 2023-07-13 15:31:13 浏览: 125
要实现view点击时横向移动,可以使用scroll-view组件和scrollLeft属性结合实现。具体步骤如下:
1. 在wxml文件中使用scroll-view组件包裹需要横向移动的view。
2. 给view添加点击事件,用于触发横向移动。
3. 在js文件中获取scroll-view组件实例,使用scrollLeft属性设置横向滚动距离,从而实现横向移动。
示例代码如下:
wxml文件:
```
<scroll-view scroll-x>
<view class="item" bindtap="handleClick">item1</view>
<view class="item" bindtap="handleClick">item2</view>
<view class="item" bindtap="handleClick">item3</view>
</scroll-view>
```
js文件:
```
Page({
handleClick() {
const query = wx.createSelectorQuery()
query.select('#scroll-view').boundingClientRect()
query.exec(res => {
const scrollViewWidth = res[0].width // 获取scroll-view组件宽度
const scrollLeft = scrollViewWidth // 设置横向滚动距离
this.setData({
scrollLeft
})
})
}
})
```
CSS样式:
```
.item {
width: 100px;
height: 100px;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)