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


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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
浅谈redux以及react-redux简单实现
Aug 28 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
vue中nextTick用法实例
Sep 11 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两种无限分类方法实例
2015/04/21 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JavaScript手机振动API
2016/06/11 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
详解python中index()、find()方法
2019/08/29 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python unittest框架操作实例解析
2020/04/13 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
土木工程毕业生自荐信
2013/09/21 职场文书
管理专员自荐信
2014/01/26 职场文书
暑期社会实践方案
2014/02/05 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
安全生产年活动总结
2014/08/29 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年工程师工作总结
2014/11/25 职场文书