南京小程序开发公司通过本文一个实例说明了使用微信小程序实现自定义页码滑动切换的方法。分享供您参考，如下：
结果如下：
微信小程序中滑动切换自定义页码的方法分析
这里的三张图片随着滑动部件一起旋转，下面的数字1,2和3将随着图片的切换而改变。
我们无法在微信小程序中运行DOM，所以
var div = document.getElementById('id');
div.setAttribute("class", "className");
这是通过这种方式实现的。
然后我们可以考虑使用隐藏或wx:if以这种方式，依次显示/隐藏由三个页面显示的视图。但我不知道为什么这种方法只支持一种操作。
最后，display:none/ block为了实现阴影/显示状态的切换，该显示被写入wxml文件中
<view >
<view style="display:{{bottomHidden1}}" >
<view>
<text> {{index+1}-5 </text>//index is due to the use of <block wx:for="{itemInfor}}" display content above, index counts from 0 is the current subscript.
</view>
<view>
<image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
</view>
</view>
<view style="display:{{bottomHidden2}}">
<view>
<text > {{index+1}}-5</text>
</view>
<view>
<image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
</view>
</view>
<view style="display:{{bottomHidden3}}">
<view>
<text>{{index+1}}-5</text>
</view>
<view>
<image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
</view>
</view>
</view>
这是页码显示部分。页码的组成包括文本和图像（下面的白色水平线），它嵌套<swiper-item></swiper-item>在
BottomView采用position:fixed定位模式固定在底部以设置高度和宽度。采用底部3,2和1。position:absolute方式。请注意，如果使用bottomView display:flexPosition将无法使用。因此本节不使用flex。但是使用了上面的文字和图片。display:flex这种方式比较简单。
在swiper中，bind bindchange="swiperChange"方法用于在切换页面时触发较低页码的更改操作。在JS文件中，方法如下：
Page({
data: {
bottomHidden1:"block",
bottomHidden2: "none" ,
bottomHidden3: "none" ,
},
swiperChange:function(event){
Var currentView = event. detail. current; // Here we use the parameter current brought by swiper's bindchange event, which counts from 0 to the current page number.
var isHidden1 ="";
var isHidden2 ="";
var isHidden3 ="";
switch (currentView) {
case 1:
isHidden1 = "none";
isHidden2 = "block";
isHidden3 = "none";
break;
case 2:
isHidden1 = "none";
isHidden2 = "none";
isHidden3 = "block" ;
break;
case 0:
isHidden1 = "block";
isHidden2 = "none";
isHidden3 = "none";;
break;
}
this.setData({
bottomHidden1:isHidden1,
bottomHidden2: isHidden2,
bottomHidden3: isHidden3
});
},
我希望这篇文章对微信小程序的开发有所帮助。
本文地址：
http://www.njanyou.cn/web/2507.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
南京网站制作为什么说滚动劫持会破坏用户体验
下一篇：
如何快速构建域权限
