欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京小程序开发公司解析微信小程序中滑动切换自定义页码的方法
来源:南京网站制作 时间:2019-05-23 08:47:57

南京小程序开发公司通过本文一个实例说明了使用微信小程序实现自定义页码滑动切换的方法。分享供您参考,如下:

 
结果如下:

微信小程序中滑动切换自定义页码的方法分析
 
这里的三张图片随着滑动部件一起旋转,下面的数字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.ccdiya.com/web/2507.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 南京网站制作为什么说滚动劫持会破坏用户体验
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程宏图棋牌官网
南京德普筒仓建安工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
你可能感兴趣
您的电子商务商店可以从亚马逊学到什么?
了解SEO的WordPress博客标签
非营利网站的筹款技巧
SEO审核清单:您应该寻找什么?
如何为您的非营利组织创建更好的用户调查
4种方式内部链接构建SEO和转换潜在客户
如何在多个地点发展本地搜索引擎优化
6个白帽连锁建立B2B战略
最后更新
南京小程序开发公司解析微信小程序中滑动切换自定义页码的方法 南京网站制作为什么说滚动劫持会破坏用户体验 南京小程序开发公司分享微信applet日历效果 南京小程序开发公司是如何通过微信小程序实现的复选框效果 被遗忘的搜索引擎优化任务提升排名 什么是推荐的2019年页面加载时间? 使用面包屑导航改善用户体验的方法 南京小程序开发公司教你实现微信小程序星级评价效果
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
汇丰彩票官网 河北快3 28彩票官网 265彩票官网 福德正神彩票充值中心 159彩票 河北快3走势图 优信彩票充值 159彩票官网 17彩票官网