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


Posted in Javascript onDecember 29, 2018

本文实例讲述了微信小程序实现滑动切换自定义页码的方法。分享给大家供大家参考,具体如下:

效果如下:

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

这里三个图片使用了swiper组件进行轮播,下方的页码数字1、2、3会随着图片的切换变动位置

在微信小程序中我们是无法操作dom的,那么

var div = document.getElementById('id');
div.setAttribute("class", "className");

这种方式实现。

然后我们可以考虑使用hidden或者wx:if的方式,将三个页码显示的view进行轮流显示/隐藏操作。但是不知道为什么这种方式只支持一次操作

最后,使用了display:none/block来达到影藏/显示状态的切换,这个display是写在wxml文件中的

<view class="bottomView" >
  <view class="bottom1" style="display:{{bottomHidden1}}" >
   <view class="pageCur">
   <text class="textPageCur textFont">{{index+1}}-5</text>    //index是因为上方采用了<block wx:for="{{itemInfor}}" >显示内容,index从0开始计数便是当前下标
   </view>
   <view class="buttomImg">
   <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
  </view>
  <view class="bottom2" style="display:{{bottomHidden2}}">
   <view class="pageCur">
   <text class="textPageCur textFont" > {{index+1}}-5</text>
   </view>
   <view class="buttomImg">
    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
  </view>
  <view class="bottom3" style="display:{{bottomHidden3}}">
   <view class="pageCur">
   <text class="textPageCur textFont">{{index+1}}-5</text>
   </view>
   <view class="buttomImg">
    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
   </view>
  </view>

以上这就是页码显示部分,页码的组成包括一个text和一个image(下方白色横线),这个内容嵌套在<swiper-item></swiper-item>

bottomView采用position:fixed的定位方式固定在底部设置高和宽,bottom3、2、1采用position:absolute的方式。需要注意的是,如果在bottomView使用了display:flex,将无法使用position。所以在这一部分未采用flex。但是上面的文字和图片部分采用的是display:flex实现的,这种方式比较简单

在swiper中,绑定了bindchange="swiperChange"方法,用于在页面切换时触发下方页码的变化动作,在js文件中该方法如下:

Page({
 data: {
 bottomHidden1:"block",
 bottomHidden2: "none" ,
 bottomHidden3: "none" ,
 },
 swiperChange:function(event){
 var currentView=event.detail.current;     //此处使用了swiper的bindchange事件带过来的参数current,这个参数从0开始计数,内容为当前页码
 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
 });
 },

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
angularJS开发注意事项
May 26 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
vue实现分页组件
Jun 16 #Javascript
如何用RxJS实现Redux Form
Dec 29 #Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 #Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
javascript实现计算指定范围内的质数示例
Dec 29 #Javascript
基于vue.js组件实现分页效果
Dec 29 #Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 #Javascript
You might like
优化PHP程序的方法小结
2012/02/23 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
非常好的js代码
2006/06/27 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python基础中所出现的异常报错总结
2016/11/19 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python实现结构体代码实例
2020/02/10 Python
pandas中ix的使用详细讲解
2020/03/09 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
大学校运会广播稿
2014/02/03 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
服务承诺书
2015/01/19 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
flex弹性布局详解
2022/03/20 HTML / CSS