uni-app 点击某按钮滑动到视图某一区域

本文介绍如何在uni-app中实现一个功能,当用户点击右下角的评论图标时,页面平滑滚动到评论区域。通过添加HTML点击事件和JS注册方法,利用uni.createSelectorQuery获取元素位置,并使用uni.pageScrollTo进行平滑滚动。
摘要由CSDN通过智能技术生成

需求:点击右下角评论图标 界面自滑动至评论区域

            

代码:

...html:添加点击事件

...js:注册事件

 再放一下方法的text:

scrollComment() {

                let scrollTop;

                //获取某元素距离顶部的距离

                let query = uni.createSelectorQuery(); ​

                query.select('.comment').boundingClientRect(res => { ​

                        scrollTop = res.top; ​

                }).exec() ​

                uni.pageScrollTo({ ​ scrollTop: scrollTop, ​ duration: 150 ​ });

}

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现仿抖音视频滑动效果,你可以使用uni-app框架的swiper组件结合相关的动画效果来实现。下面是一种可能的实现方式: 1. 在你的uni-app项目,使用swiper组件创建一个滑动容器,设置为横向滑动。 ```html <swiper class="swiper" :autoplay="false" :indicator-dots="false" :circular="true"> <swiper-item v-for="(item, index) in videoList" :key="index"> <video :src="item.url" autoplay muted loop></video> </swiper-item> </swiper> ``` 2. 使用css样式来设置容器的布局和样式。 ```css .swiper { width: 100%; height: 100%; overflow: hidden; } .swiper-item { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: cover; } ``` 3. 使用JavaScript或者Vue的生命周期钩子函数来监听滑动事件,并根据滑动的距离和方向来实现动画效果。 ```javascript export default { data() { return { videoList: [...], // 视频列表数据 startX: 0, // 触摸起始点的X坐标 startY: 0, // 触摸起始点的Y坐标 moveX: 0, // 触摸移动的X坐标 moveY: 0, // 触摸移动的Y坐标 direction: '', // 滑动方向 currentIndex: 0 // 当前显示的视频索引 }; }, methods: { onTouchStart(e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, onTouchMove(e) { this.moveX = e.changedTouches[0].pageX; this.moveY = e.changedTouches[0].pageY; const offsetX = this.moveX - this.startX; const offsetY = this.moveY - this.startY; if (Math.abs(offsetY) < Math.abs(offsetX)) { // 水平滑动 if (offsetX > 0) { this.direction = 'right'; } else { this.direction = 'left'; } } else { // 垂直滑动 if (offsetY > 0) { this.direction = 'down'; } else { this.direction = 'up'; } } }, onTouchEnd() { if (this.direction === 'left') { // 向左滑动,切换到下一个视频 this.currentIndex++; if (this.currentIndex >= this.videoList.length) { this.currentIndex = 0; } } else if (this.direction === 'right') { // 向右滑动,切换到上一个视频 this.currentIndex--; if (this.currentIndex < 0) { this.currentIndex = this.videoList.length - 1; } } // 根据currentIndex更新swiper组件的activeIndex属性,实现视图切换 this.$refs.swiper.swiperRef.setActiveItem(this.currentIndex); } } }; ``` 上述代码,通过监听触摸事件,根据滑动方向切换到对应的视频,并将视图更新到当前的视频。 这是一种简单的实现方式,你可以根据自己的需求进行扩展和优化。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值