【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡

【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡,第1张

最近在做一个uniapp的项目的时候,碰到了一个Tab选项卡的需求,我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。

但是很遗憾,我并没有光看就会的本事,本着遇事不决先百度的原则,就在百度找了一篇真实有用,但是有小小bug的,下面是原po地址:

uni-app使用swiper切换页面每个滑块高度自适应

懒得点的可以接着往下看哈,我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图

首先就是Tab选项卡的点击切换块,这里我是用了小程序自带的scroll-view来实现的,同时给该元素添加scroll-into-view属性来实现点击跟踪(其实这效果不是特别好,我期望的效果是点击这个的时候还留点位置给上一个,但是我太菜了加上为了省事所以就直接用这个了)

scroll-into-view的用法可自行查阅官方文档

接着是swiper标签块,这里因为实现都一样,所以我就直接把原博客那边的贴过来了,大家根据自己的需求更改类名及swiper-item内部的组件即可

这里有个注意点,就是要给swiper-item内部的组件(盒子)一个相同的类名,后面获取高度时需要用到。

初始数据方面,这里我也把我的初始数据贴出来,大家根据需求自行修改即可

后面的方法本来想一个个贴的,但是发现好像有点乱,所以就直接全贴出来了,里面的逻辑大伙应该能理清吧哈哈

到这里js部分也结束了,最后是css部分,我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题,也就是

因此大家在初始化css数据的时候需要注意一下,这里我也把我的初始css贴出来,大家根据需求自行修改即可

到这里这一块的内容就全部结束了,噢对了关于setSwiperHeight里面获取dom元素的方法,也就是

unicreateSelectorQuery() 。这玩意说实话我也搞不太懂,总之就跟selectorQuery选择器差不多,CVM大法:复制粘贴,然后修改数据即可。

第一次正经写文还是很紧张的哈哈,希望能帮到有需要的人。谢谢各位

今天给大家介绍几个招式:招式一 图文消息底部输入添加阅读原文链接,用户点击左下角阅读原文可以跳转到指定场景页面(要求:认证的订阅号、)Step 1 点击群发功能Step2 新建图文消息Step 3 编辑图文消息,在“原文链接”处设置需要展示的场。

onSlideChangeStart: function() {

var H = $("content-slide")eq(tabsSwiperactiveIndex)height();

$("swiper-slide")css('height', H + 'px');

$("swiper-wrapper")css('height', H + 'px');

}

这段放里面试试

学小程序时写过一个B站demo,也遇到此问题,最后自定义Swiper的Dot来实现了。 思路是:用view组件重写dot,给swiper组件绑定bindchange事件用来获取当前第几个dot,动态改变class。

在onTransitionEnd(swiper) 或者 onSlideChangeEnd(swiper)回调中给当前页添加动画类,其他页移除动画类,其中 swiperactiveIndex 为当前活动块的索引。

以上就是关于【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡全部的内容,包括:【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡、微信打开H5页面如何实现全屏效果、swiper插件怎么设置响应式高度自适应等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9474559.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存