微信小程序滑动切换自定义页码方法分析

本文通过一个例子来描述微信小程序滑动切换自定义页码的方法。分享给大家参考，如下：

效果如下：

这里，使用swiper组件旋转广播三个图片，并且下面的页码1、2和3将随着图片的切换而改变位置

那我们就不能在微信小程序里操作dom了

var div=document . getelementbyid(' id ')；div.setAttribute('class '，' class name ')；就这样。

然后，我们可以考虑使用hidden或wx:if依次显示/隐藏带有三个页码的视图。但是不知道为什么这个方法只支持一个操作

最后，display:none/block用于切换阴影存储/显示状态。该显示是用wxml文件编写的

view class=' bottom view ' view class=' bottom 1 ' style=' display : { { bottom hidden 1 } } ' view class=' page cur ' text class=' text page cur text font ' { index 1 } }-5/text//index是因为block wx:for='{{itemInfor}} '用于在顶部显示内容。从0开始的索引计数是当前的下标/view view class=' buttonimg ' image clss=' horig ' mode=' topleft ' src=' http :/img/horizontal . jpg '/image/view/view view class=' bottom 2 ' style=' display : { { bottom hidden 2 } } ' view class=' pageCur ' text class=' textPageCur text font ' { index 1 } }-5/text/view class=' buttonimg ' image clss=' horizmg ' mode='左上角' src=' http:/img/horizontal . jpg '/image/View/View View class=' bottom 3 ' style=' display : { { bottom hidden 3 } } ' View class=' pageCur ' text class=' textPageCur text font ' { index 1 } }-5/text/View class=' buttonimg ' imageclss=' horization ' mode=' topleft ' src=' http 3360./img/horizontal . jpg '/image/view/view/view这是页码显示部分。页码由文本和图像(底部的白色水平线)组成，嵌套在Swiper-

BottomView采用position:fixed的定位方式固定底部的高度和宽度，bottom3、2、1采用position:absolute的定位方式。需要注意的是，如果在bottomView中使用display:flex，则无法使用position。因此，这部分不使用flex。但是上面的文字和图片是通过display:flex实现的，比较简单

在swiper中，bindchange=' swiperChange '方法是绑定的，用于在切换页面时触发下页码的更改动作。在js文件中，这个方法如下：

page({ data : { bottomhidden 1: ' block '、bottomHidden2: 'none '、bottomHidden3: 'none '，}，swipurchasing : function(event){ var currentView=event . detail . current；//这里使用swiper的bindchange事件带来的参数current。此参数从0开始计数，内容为当前页码var isHidden1=var isHidden2=var isHidden3=switch(CurrentView){ case 1: Ishide n1=' none '；isHidden2=' blockisHidden3=“无”；打破；案例2: isHidden1=' noneisHidden2=' noneisHidden3=' block打破；case 0: isHidden1=' blockisHidden2=' noneisHidden3=“无”；打破；} this . setdata({ bottomhidden 1: ishidden 1，bottomHidden2: isHidden2，bottomhidden 3: ishidden 3 })；}，希望这篇文章对微信小程序的开发有所帮助。