由于项目是从基于谷歌浏览器改版成基于IE浏览器,所以项目中基本上是以jQuery来控制DOM,其中遇到了使用数组的push和jQuery的html方法来动态生成页面(主要是一个个运单),页面中引用了swiper,再通过循环生成后台数据所反的相对应个数的slider,但是发现在页面载入后,组件并没有生效,后来终于通过一系列搜索找到了解决的方法,也是痴呆了TAT。
<section>标签中就是装的动态生成的内容。
这里是生成所有订单的方法,其中涉及到swiper的push方法在相关图片注释处。
接下来初始化swiper,然后在请求后台数据成功后的回调函数调用fullOrder方法
结果发现swiper根本没有被调用到,默默的mark一下,在图片多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。
正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的element.html()之后。由于swiper是需要 先初始化再执行 ,但这里是先生成swiper, 所以需要在生成swiper之后再初始化 。
只有这样在页面加载完后swiper才会被调用成功哒。
这个注意看swiper的文档就可以了,可以使用jquery动态添加元素,然后调用swiper的update()方法即可。下面是一个小例子,记得把swiper和jquery引入进来。
Swiper常用于移动端网站的内容触摸滑动。
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
微信小程序Swiper做Tab切换,带tab切换动画
小程序中我们做tab切换一般情况下可以做点击切换,但是有Swiper组件,其实我们也可以做滑动切换
监听Swiper的bindchange,我们就可以在切换时改变tab的选装状态达到切换的目的。
但是这样的方式tab的切换方式是跳转式的,体验不是很好。于是就有了这个demo,我们一步步优化切换体验。
首先:利用flex布局,做出tab区域,如果tab选项卡很多可以使用Scroll-view;一般的跳转式的tab用boder-bottom实现就好,这里我们加了一个“navbar-slider”,加上translateX动画实现平移切换。
然后:计算出每个tabItem的宽度,和每个item距离0坐标的距离;下中50是slider的宽度,对应上面“width:50px”
关联:1、监听item点击,切换swiper;2、监听swiper切换改变slider位置和tab显示
效果展示如下:
现在我们已经实现了,Swiper和tab的带动画联动,但是我们可以发现,我们的切换动画是在切换之后进行的,我们这里还可以继续优化。
swiper在切换时可以监听bindtransition,swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},dx则是平移的偏移量,我们可以通过这个监听来实时设置slider的位置。
切换后校正slider的位置,这里我们不能使用bindchange来校正,因为bindchange在切换时手指释放的时候就调用了,我们这里使用bindanimationfinish回调来校正(动画结束时会触发 animationfinish 事件,event.detail 同上)
最终:展示如下
在小程序开发文档中明确说明了最好不要频繁调用setData,我们最后这种方式就会频繁的调用,所以这里其实只是提供这种思路,但是工程中并不建议这么使用
小程序开发者文档
SwiperTab
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)