网站的维护与更新,高端网站改版,做网站.服务器怎么买,网站注册信息在微信小程序中,需要实现展示5个#xff0c;横向层叠的轮播图效果#xff0c;轮播图由中间到2侧的依次缩小.如下图 使用原生小程序进行开发,没有使用Skyline模式#xff0c;所以layout-type配置项也无效。所以基于swiper组件进行调整。 主要思路就是设置不同的样式#xff…在微信小程序中,需要实现展示5个横向层叠的轮播图效果轮播图由中间到2侧的依次缩小.如下图 使用原生小程序进行开发,没有使用Skyline模式所以layout-type配置项也无效。所以基于swiper组件进行调整。 主要思路就是设置不同的样式根据当前激活的项来动态切换样式。 需要注意的是下文激活的项指的是中间最大的一项而不是swiper激活的最左侧的一项
1. swiper-item
由于有层叠效果所以要给不同的swiper-item元素添加上不同的zindex层级。而swiper-item元素自带绝对定位。 根据层叠数量决定需要加几个层级。当有5个时只要给激活的中间项加上最高的层级左右2侧加上低一层级。
2. item
不同层级的swiper-item中的item对应有不同的样式根据所在的不同层级需要给对应的item添加上具体的效果样式。 此效果需要给不同的item添加缩放和左右偏移样式
3.动态切换
在轮播图的切换中需要给各个swiper-item动态切换样式。 我实现的方式是在swiper的bindchange方法中改变激活项的序号编写wxs方法将当前激活序号和此项序号传入方法进行判断返回不同的类wxml动态渲染不同的类。 同时轮播图一般需要循环无限滚动所以也需要加上轮播图项的个数。
swiper classswiperedu display-multiple-items5 circular{{true}} bindchangeswiperChange autoplay{{true}}swiper-item wx:for{{list}} wx:key{{item}} class{{transform.classindex(index,nowIdx,listlen)}}view class{{transform.classtype(index,nowIdx,listlen)}}/view/swiper-item
/swiperclassindex方法动态的判断swiper-item的层级classtype方法动态判断item的样式。
// 判断样式
var classtype function(index,curindex,length){var indexnum parseInt(index),curindexnum parseInt(curindex);var cha Math.abs(indexnum-curindexnum);//激活项是list最后一项if(curindex length-1){// 首尾衔接,第一项在最后一项右边if(index0){return 激活项右边样式类;}}//激活项是list最后一项else if(curindex0){// 首尾衔接,最后一项在第一项在左边if(indexlength-1){return 激活项右左边样式类;}}//激活项if(cha0){return 激活项样式}//激活项右侧else if(indexnum-curindexnum1){return 激活项右边样式类;}//激活项左侧else if(indexnum-curindexnum-1){return 激活项左边样式类;}else {return 普通样式}
}// 判断层级
var classindex function(index,curindex,length){var indexnum parseInt(index),curindexnum parseInt(curindex);var cha Math.abs(indexnum-curindexnum);//激活swipet-item是list最后一项if(curindex length-1){// 首尾衔接,第一swiper-item在最后一个右边if(index0){return zindex2;}}//激活swiper-item是list最后一项else if(curindex0){// 首尾衔接,最后swiper-item在第一个左边if(indexlength-1){return zindex2;}}//激活项,层级最高if(cha0){return zindex3}//左右两侧,层级第2else if(cha1){return zindex2;}//普通不加层级else {return }
}轮播图循环变化时要计算%的序号 swiperChange(e) {this.setData({nowIdx: (e.detail.current 2) % this.data.list.length,})},e.detail.current是轮播图的currentIndex指的是swiper最左侧的swiper由于效果中激活项是坐起第3项所以激活的index需要2
总结
这个效果的变化是由swiper自动切换触发bindchange方法推动的。没有显式的声明swiper的current。 对于提供给用户切换箭头方法的层叠轮播图需要声明swiper的current属性用户的切换和current切换的事件会相互冲突那个效果有时间再写吧
